2016-09-14 43 views
2

調用的ng-click方法不會刷新ng-repeat我正在創建將顯示覆合分層數據的可重用指令。從指令

在第一頁加載時,會顯示類似「服務器」/「軟件」/「主板」(綁定到ng-repeat的項目數組)。如果用戶點擊「服務器」,則會顯示可用的服務器,如「Ser1」/「Ser2」/「Ser3」。

html : 

     <div ng-app="myApp" ng-controller="myCtrl" ng-init="init()"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <div my-dir paramitem="item"></div> 
       </li> 
     </ul> 
     </div> 

現在第一次正在加載項目,但點擊任何項目都不會刷新ng-repeat。我在下面的控制器中檢查了ng-click,「subItemClick」方法,並且它正在被解僱。但是項目集合沒有被刷新。

http://plnkr.co/edit/rZk9cbEJU90oupVgcSQt

Controller: 

    var myApp = angular.module('myApp', []); 

    myApp.controller('myCtrl', ['$scope', function($scope) { 
     $scope.init = function() { 
      $scope.items = [{iname: 'server',subItems: ['ser1', 'ser2','ser3']} 
      ]; 
     }; 

     $scope.subItemClick = function(sb) { 
      if (sb.subItems.length > 0) { 
      var zdupitems = []; 
      for (var i = 0; i < sb.subItems.length; i++) { 
       zdupitems.push({ 
       iname: sb.subItems[i], 
       subItems: []    
       }); 
      } 
      $scope.items = zdupitems; 
    } 
     }; 

     }]) 
     .directive('myDir', function() { 
     return { 
      controller: 'myCtrl', 
      template: "<div><a href=# ng-click='subItemClick(paramitem)'>{{paramitem.iname}}</a></div>", 
      scope: { 
      paramitem: '=' 
      } 
      } 
     }); 

我期待像SER1/SER2項目綁定到NG-重複上點擊「服務器」,但它沒有發生。

任何幫助?

+0

您的指令使用隔離範圍。在你傳入它之前,在該範圍內沒有'subItemClick()' – charlietfl

回答

0

我認爲onClick搞砸了$ scope的方法定義。在這種情況下,呈現ngRepeat的$ scope實際上是$ scope。$ parent(不要使用$ scope。$ parent),並且你在錯誤的$ scope上創建一個新的items數組。

我意識到jsfiddle可能是你正在處理的一個愚蠢的例子,但是這種方法是錯誤的。如果您需要使用全局值,則應該從注入的服務中獲取它,以便如果一個組件重置了一個值,並且每個值都反映出新值。 您可能不會將onClick元素放在單獨的指令中。那有什麼價值?