javascript - AngularJS - 我可以使用指令更改 View 中 ng-repeat 的值/表达式吗

Question

我有一个假设性问题。假设我的 Controller 中有两个对象数组，在我看来，我循环访问这些对象数组之一的数据。现在我可以在指令中切换此 ng-repart 的值(或更改表达式)吗？例如...

这是我的 Controller :

controller('MainCtrl', ['$scope', function($scope) {
            $scope.beatles = [{id:1, name: "John", inst: "Guitar", alive: false},{id:2, name: "Paul", inst: "Bass", alive: true},{id:3, name: "George", inst: "Guitar", alive: false},{id:4, name: "Ringo", inst: "Drums", alive: true}];

            $scope.huskers = [{id:1, name: "Bob", inst: "Guitar", alive: true},{id:2, name: "Grant", inst: "Drums", alive: true},{id:3, name: "George", inst: "Bass", alive: true}];
    }])

这是我的观点...

<div data-my-template-dir class="beatles">
        <div data-ng-repeat="beatle in beatles track by $index">
          Name: {{beatle.name}}, Instrument: {{ beatle.inst }}
        </div>
</div>

这是我的指令...

restrict: 'A',
link: function (scope, element) {
  element.bind('click', function () {
     console.log('i am clicked');
     element[0].children[0].setAttribute('data-ng-repeat','beatle in huskers track by $index');
     // something should go here... like scope.apply() ???? 
});

现在，该指令似乎确实适用于模型/ctrl...但 HTML 似乎没有在 View 中更新...我是否遇到了这个错误，我可以更新 ng-repeat指令？

我这里有一个plunker(或jsbin):https://jsbin.com/fasako/edit?html,output

Answer 1

好的，我有几点评论。

首先，我认为有更好的方法来完成你想要的事情。不是编辑标记，而是为了让 Angular 重新处理标记，为了将不同的数据加载到内存中，为了将它自己处理过的标记放在屏幕上......同时制作一个引人注目的连续句子可能不是最好的编程决策。

我建议只使用一个包含所有数据的对象，然后使用一个 ng-click 项来选择要在 ng-repeat 中处理的数组。

我想出了以下示例。

angular.module('myModule',[])
.directive('myTemplate', function() {
  return {
    restrict: 'A',
    template: 
      '<div ng-repeat="item in lists[listSelected] track by $index">' +
        'Name: {{item.name}}, Instrument: {{ item.inst }}' +
      '</div>',
    controller: 'myTemplateCtrl'
  };
})
.controller('myTemplateCtrl', ['$scope', function($scope) {
  $scope.listSelected = 'beatles';
  
  $scope.lists = 
    { 
      beatles:
      [
        { id:1, name: "John", inst: "Guitar", alive: false },
        { id:2, name: "Paul", inst: "Bass", alive: true },
        { id:3, name: "George", inst: "Guitar", alive: false },
        { id:4, name: "Ringo", inst: "Drums", alive: true }
      ],
      huskers:
      [
        { id:1, name: "Bob", inst: "Guitar", alive: true },
        { id:2, name: "Grant", inst: "Drums", alive: true },
        { id:3, name: "George", inst: "Bass", alive: true }
      ]
    }
  ;
  
  // this should only be bound to scope once the arrays exist
  $scope.changeSelection = function() {
    $scope.listSelected = $scope.listSelected === 'beatles' ? 'huskers' : 'beatles';
  };
}]);

body {
  font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
    
.beatles {
  padding: 10px;
  border: 1px solid lightblue;
  background-color: aliceblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
  <div my-template ng-click="changeSelection()" class="beatles"></div>
</div>