양방향 바인딩이 지시문 컨트롤러를 업데이트하지 않는 이유

Question

John Papa의 줄에 style guide과 일치 함 ControllerAs 구문을 사용하도록 지시문을 업데이트했습니다. 그러나이 작업을 수행 한 후 지시문이 바인딩 된 변수가 변경되면 내 지시문이 업데이트되지 않습니다. mainCtrl.rules가 업데이트 될 때

이 ctrl.rules의 값이이 문제를 해결하기 위해

을 업데이트되지 않습니다 즉, 나는 ctrl.rules 변수를 업데이트하는 링크 기능의 시계를 만들했을 때 $ scope.rules 변경.

이유 - 지시문과 컨트롤러가 같은 범위에 있지 않은 이유는 무엇입니까?

HTML

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

JS - 홈페이지 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; 
       } 
      }); 
     }; 
})(); 

템플릿

<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

코드의 잘못된 부분은이 규칙의 기존 목록을 가리 킵니다 myCtrl에서 ctrl.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.getRules = function() { return $scope.rules; } 

다음 템플릿에서 ng-repeat로 변경하는 대신 $scope.rules를 반환하면 함수를 만들 수 있습니다 $scope.rules 참조에 ctrl.rules을 설정하는 그래서 대신 ctrl.rules = $scope.rules의 다음과 같은 작업을 수행 할 수 있습니다

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

옵션 2 옵션 1 어렵게 동안 이해하기 다소 쉽다 코드를 읽으려는 사람 외에 다른 사람을 이해할 수 있습니다.