I am trying to listen/watch to a variable change in a controller into a directive, for link in a directive watch works but I am trying using an API which has work done at compile time(directive lifecycle). So, I am looking for any work-around so I could watch variable change at compile level.
Note: I am using angular-1.4.
Below is code for a link that would work and below it is code that I wish could work but not working(It seems at compile $watch can't be applied.)
Html code:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<counter model2="count1"></counter>
</div>
</div>
Working code :
var app = angular.module('myApp', [])
app.directive('counter',
function($timeout) {
return {
restrict: 'EAC',
template: `<div>Directive Counter: {{internalCount}}</div>`,
scope: {
internalCount: '=model2'
},
link: function($scope, element) {
function addCount() {
$timeout(function() {
$scope.internalCount += 1;
addCount();
}, 1000)
}
$scope.$watch('internalCount', function() {
console.log("hrruy!!!");
console.log($scope.internalCount);
});
addCount();
}
};
}
)
app.controller('myCtrl', function($scope) {
$scope.count1 = 10;
});
Below is the Code that i wish should work(i.e using watch at compile level):
var app = angular.module('myApp', [])
app.directive('counter',
function($timeout) {
return {
restrict: 'EAC',
template: `<div>Directive Counter: {{internalCount}}</div>`,
scope: {
internalCount: '=model2'
},
link:function(){
console.log("linker callled...");
},
compile: function($scope, element) {
return function (scope, element, attrs) {
function addCount() {
$timeout(function() {
$scope.internalCount += 1;
addCount();
}, 1000)
}
scope.$watch('internalCount', function() {
console.log("hrruy!!!");
console.log($scope.internalCount);
});
addCount();
}
}
};
}
)
app.controller('myCtrl', function($scope) {
$scope.count1 = 10;
});
Edited above code as per suggested corrections by Anoop and Hitman's and exact problem requirement to work:
var app = angular.module('myApp', [])
app.directive('counter',
function($timeout) {
return {
restrict: 'EAC',
template: `<div>Directive Counter: {{internalCount}}</div>`,
scope: {
internalCount: '=model2'
},
compile: function(element, attrs) {
return function(scope, element, attrs) {
scope.$watch('internalCount', function() {
console.log("hrruy!!!");
console.log(scope.internalCount);
}, true);
//addCount();
}
}
};
}
)
app.controller('myCtrl', function($scope,$timeout) {
console.log("MAin Controller!! works!!!");
$scope.count1 = 10;
function addCount() {
$timeout(function() {
//$scope.internalCount += 1;
$scope.count1+=1;
//addCount();
}, 1000)
}
$scope.$watch('count1', function() {
console.log("Main-hrruy!!!");
addCount();
console.log($scope.count1);
}, true);
});
Note : As per problem statement here , last code uses "$scope.count1" variable from controller and listens/watches in directive compile function (default post-link being done).
But still a problem arises if say "$scope.count1" is a complex nested JSON map/object. In that scenario, directive does not detect count1 changes.So As how do I keep watching in directive compile function if controller variable is a complex object?
