AngularJS: $watch внутри директивы не работает, когда изменяется значение $rootScope

Я создал приложение angularjs, в котором у меня есть директива, я наблюдаю за часами в директиве, чтобы запускать некоторые методы в директиве, когда происходит изменение переменной $rootScope, но проблема в том, что $Значение rootScope.name изменяется, часы, находящиеся внутри директивы, не работают

Мой код приведен ниже

Рабочий демонстрационный пример

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);
        }
    };
});

Ответ 1

Я исправил его. для работы 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);  
    }
  };
});

Ответ 2

scope: {},

Вы используете изолированную область. Он не наследуется от родительской области, поэтому name не существует в этой области. Поскольку вы определяете его непосредственно в $rootScope, вы можете получить к нему доступ в своей директиве:

module.directive("tree", function($compile, $rootScope) {
    ...
    link : function(scope, elm, $attrs) {
       function update()
       {
       };
       $rootScope.$watch('name', function(newVal, oldVal) {

Использование области корня не является лучшей идеей. Я бы не поставил name в область корня для начала. Лучше поместите его в область управления и используйте привязку, аналогичную решению, предложенному @simon.