Почему двухсторонняя привязка не обновляет директивы контроллера

Question

В соответствии с style guide от John Papa У меня есть моя директива для использования синтаксиса ControllerAs. Однако после этого моя директива не обновилась, когда были внесены изменения в переменную, к которой была привязана директива.

т.е. когда mainCtrl.rules обновляется, значение ctrl.rules не обновляется

Чтобы решить эту проблему, я должен был создать часы в функции связи, которая обновляет ctrl.rules переменную при $ scope.rules изменения.

Почему это - директива и контроллер не в той же области?

HTML

<div my-directive rules="mainCtrl.rules"></div> 

JS - Main Ctrl

rulesService.get().then(mainCtrl.rules = response.rules;); 

JS - Директива

(function() { 

    angular.module('myModule') 
     .directive('myDirective', myDirective); 

     myDirective.$inject = []; 

     function myDirective() 
     { 
      var directive = { 
       restrict: 'A', 
       scope: { 
        rules: '=' 
       }, 
       controller: 'myCtrl', 
       controllerAs: 'ctrl', 
       templateUrl: "/Template/myDirective", 
       transclude: true, 
       link: linkFunc 
      }; 

      return directive; 
     }; 

     angular.module('myModule') 
      .controller('myCtrl', myCtrl); 

     myCtrl.$inject = ['$scope']; 

     function myCtrl($scope) 
     { 
      var ctrl = this; 
      ctrl.rules = $scope.rules; 
      ctrl.showRules = false; 
      ctrl.toggleShowRules = toggleShowRules; 

      function toggleShowRules() { 
       ctrl.showRules = !ctrl.showRules; 
      }; 
     }; 

     function linkFunc($scope, $element, $attrs, ctrl) 
     { 
      //watch the rules collection on the directive and update controller if it changes 
      $scope.$watch("rules", function (newValue, oldValue) { 
       if(newValue != oldValue) 
       { 
        ctrl.rules = newValue; 
       } 
      }); 
     }; 
})(); 

TEMPLATE

<div class="rules" ng-show="rules.length > 0"> 
     <ul ng-show="ctrl.showRules"> 
      <li ng-repeat="rule in ctrl.rules" class="rule-details"> 
       <p>{{rule.title}}</p>        
      </li> 
     </ul> 
    </div> 

Answer 1

Ваша функция связи $scope не является провайдером, это изолированный scope из директивы, поэтому я думаю, что у вас есть ctrl, где this не является областью действия директивы, но это конструктор.

Я думаю, что если вы сделаете что-то подобное, вы увидите разницу.

function myCtrl($scope, $attrs, $log) { 

    this.scope = $scope; 

    $log.debug(this); 
    // vs 
    $log.debug(this.scope); 

Answer 2

Нарушитель кусок кода в myCtrlctrl.rules = $scope.rules; это будет указывать на существующий список правил. Затем, когда возникает rulesService.get().then(mainCtrl.rules = response.rules;);, он устанавливает $scope.rules в вашей директиве, чтобы указать на ваши новые данные, однако ctrl.rules все еще указывает на старый список. Есть два способа исправить это без серьезных изменений в коде.

Вариант 1: Вместо того, чтобы заменить ссылку на ваш mainCtrl вы можете обновить его следующим образом:

mainCtrl.rules.length = 0; 
angular.extend(mainCtrl.rules, response.rules); 

Этот вариант несколько дороже, хотя, так как есть зацикливание включать, чтобы ваша ссылка обновляется с новым значения.

Вариант 2: Вместо установки ctrl.rules для ссылок $scope.rules вы можете создать функцию, возвращающих $scope.rules поэтому вместо ctrl.rules = $scope.rules вы можете сделать следующее:

ctrl.getRules = function() { return $scope.rules; } 

затем в шаблоне изменить ваш ng-repeat в

<li ng-repeat="rule in ctrl.getRules()" class="rule-details"> 

Вариант 2 несколько легче понять, в то время как вариант 1 сложнее понять кого-то, кроме вас, кто пытается прочитать код.