AngularJS : $watch within directive is not working when $rootScope value is changed
Solution 1
i have corrected it. for working fiddle
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<input type="text" ng-model="userName"/>
<button ng-click="changeValue()">Change</button>
<tree name="name">
</tree>
</div>
</div>
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {
name: '='
},
template:'<div>sample</div>',
link : function(scope, elm, $attrs) {
function update()
{
};
scope.$watch('name', function(newVal, oldVal) {
console.log('calling');
update();
}, true);
}
};
});
Solution 2
scope: {},
You use an isolated scope. It doesn't inherit from a parent scope, so name
doesn't exist in this scope. Since you define it directly in $rootScope
you could access it in your directive:
module.directive("tree", function($compile, $rootScope) {
...
link : function(scope, elm, $attrs) {
function update()
{
};
$rootScope.$watch('name', function(newVal, oldVal) {
Using the root scope is not the best idea though. I wouldn't put name
into the root scope to begin with. Better put it into the controller's scope and use binding, similar to the solution proposed by @simon.
Alex Man
profile for user123 at Stack Overflow, Q&A for professional and enthusiast programmers http://stackoverflow.com/users/flair/3253853.png
Updated on June 10, 2022Comments
-
Alex Man almost 2 years
I have created an application is angularjs in which i am having a directive, i am ahving a watch within the directive to trigger some methods within the directive when there is a change in $rootScope variable, but the problem is when the $rootScope.name value is changed the watch which is within the directive is not working
My code is as given below
var module = angular.module('myapp', []); module.controller("TreeCtrl", function($scope, $rootScope) { $scope.treeFamily = { name : "Parent" }; $scope.changeValue = function() { $rootScope.name = $scope.userName; }; }); module.directive("tree", function($compile) { return { restrict: "E", transclude: true, scope: {}, template:'<div>sample</div>', link : function(scope, elm, $attrs) { function update() { }; scope.$watch('name', function(newVal, oldVal) { console.log('calling'); update(); }, true); } }; });
-
Alex Man over 9 yearscan you please tell me wat was the issue i was making
-
simon over 9 yearsyou cant directly use rootscope inside directive. use 2 way binding by using scope:{ name : '=' }