AngularJS: $watch within directive ne fonctionne pas lorsque $rootScope valeur est changée

j'ai créé une application est angularjs dans laquelle j'ai une directive, j'ai une montre dans la directive pour déclencher certaines méthodes dans la directive quand il y a un changement dans la variable $rootScope, mais le problème est quand $rootScope.nom valeur est changé la montre qui est dans la directive ne fonctionne pas

Mon code est donné ci-dessous

"151970920 De Travail" Démo 

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);
        }
    };
});
2
demandé sur John Slegers 2014-12-03 10:09:32

2 réponses

je l'ai corrigé. pour le travail violon 

<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);  
    }
  };
});
5
répondu simon 2014-12-03 08:05:11 
scope: {},

vous utilisez une lunette isolée. Il n'hérite pas d'un champ d'application parent, donc name n'existe pas dans ce champ d'application. Puisque vous le définissez directement dans $rootScope vous pouvez y accéder dans votre directive: 

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

utiliser la portée racine n'est pas la meilleure idée cependant. Je ne mettrais pas name dans la racine pour commencer. Mieux vaut le mettre dans la portée du contrôleur et utiliser la reliure, similaire à la solution proposée par @simon.

3
répondu a better oliver 2014-12-03 10:51:45