Question

我正在创建可重复使用的指令，该指令将显示复合分层数据。

在首页加载时，将显示“服务器”/“软件”/“主板”（绑定到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-repeat但是它没有发生。

任何帮助？

Answer 1

我认为onClick搞砸了方法对$ scope的定义。在该上下文中，呈现ngRepeat的$ scope实际上是$ scope。$ parent（不使用$ scope。$ parent），并且您在错误的$ scope上创建了新的items数组。

我意识到jsfiddle可能是你所处理的一个愚蠢的例子，但无论如何都是错误的方法。如果您需要使用全局值，则应该从注入的Service获取它，以便在一个组件重置一个值时，新值将反映在任何地方。或你不能将onClick元素放在一个单独的指令中。它的价值是什么？

当从指令调用ng-click方法时，不刷新ng-repeat

1 个答案: