爲什麼雙向綁定不更新指令控制器

根據約翰帕帕的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>

來源

2014-11-06 Kildareflare

如果您打算投票，請至少發表評論爲什麼。請提供建設性的反饋。 – Kildareflare 2014-11-06 01:43:50

'controllerAs'確實是給你的控制器一個名字，以便你可以在你的模板中訪問它。所以你使用它的方式是不正確的。 – 2014-11-06 02:08:44

更新爲顯示這實際上是我在做什麼 – Kildareflare 2014-11-06 02:34:23

你的鏈接函數$scope不是提供者，它是分隔符scope進入指令，所以我認爲你所擁有的是一個ctrl，其中this不是指令的範圍，但它是構造函數。

我想如果你做這樣的事情，你會看到不同之處。

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

    this.scope = $scope; 

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

來源

2014-11-06 06:40:16 Dylan

有問題的代碼段是在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更難去了解除你以外的人誰正在嘗試閱讀代碼。

來源

2014-11-07 13:08:00

爲什麼雙向綁定不更新指令控制器

回答

相關問題