AngularJS:在ng-repeat生成的范围中设置变量

Question

如何访问ng-repeat生成的范围集？

我认为这个问题的核心是我不明白这种关系如何在a)传递给ng-repeat指令的对象集合和b)它生成的作用域集合之间起作用.我可以玩(a),ng-repeat范围观察和拾取,但我如何设置范围本身的变量(b)？

我的用例是我有一组使用ng-repeat重复的元素,每个元素都有一个使用ng-show/ng-hide切换的编辑视图; 每个元素的状态保存在本地范围的变量中.我希望能够在特定元素上触发ng-show,但是我希望从ng-repeat 外部调用触发器,因此我需要能够访问本地范围变量.

任何人都可以指出我正确的方向(或告诉我,如果我正在吠叫错误的树)？

谢谢

更新: 下面的链接非常有用,谢天谢地.最后,我为每个重复元素创建了一个指令,并使用该指令的link函数将其作用域添加到根作用域的集合中.

Answer 1

这是一个非常简单的方法来做我认为你想做的事情(当我需要做类似的事情时我想出了这个):

我们知道每个重复的项目都有自己的范围.如果我们可以将此范围传递给父范围上定义的方法,那么我们就能够在操作或添加属性方面做到我们想要的.事实证明,这可以通过this作为参数传递来完成:

例

// collection on controller scope
$scope.myCollection = [
  { name: 'John', age: 25 },
  { name: 'Barry', age: 43 },
  { name: 'Kim', age: 26 },
  { name: 'Susan', age: 51 },
  { name: 'Fritz', age: 19 }
];



// template view
<ul>
  <li ng-repeat="person in myCollection">
    <span ng-class="{ bold : isBold }">{{ person.name }} is aged {{ person.age }} </span>
    <button class="btn btn-default btn-xs" ng-click="toggleBold(this)">toggle bold</button>
  </li>
</ul>

因此,当我们按下"切换粗体"按钮时,我们调用$scope.toggleBold()我们需要在控制器的$ scope上定义的方法.请注意,我们this作为参数传递,实际上是当前的ng-repeat scope对象.

因此我们可以像这样操纵它

$scope.toggleBold = function(repeatScope) {
  if (repeatScope.isBold) {
    repeatScope.isBold = false;
  } else {
    repeatScope.isBold = true;
  }
};

这是一个工作示例:http://plnkr.co/edit/Vg9ipoEP6wxG8M1kpiW3？p = preview

Answer 2

本纳德尔给了一个非常清晰的解决方案以"我怎么分配到ngRepeat的$scope"的问题,我只是在我自己的项目实施.从本质上讲,你可以添加一个ngController指令的旁边ngRepeat,和操作ngRepeat的$scope控制器内.

下面是我自己设计的例子,它演示了ngRepeat如何$scope在控制器中分配.是的,有是更好的方式来做到这一点千真万确的事情.有关更好的例子,请参阅Ben Nadel的帖子.

<div ng-controller="ListCtrl">
  <h1>ngRepeat + ngController</h1>
  <ul>
    <li ng-repeat="item in items" ng-controller="ItemCtrl" ng-show="isVisible">
      {{item.name}}
      <button ng-click="hide()">hide me!</button>
    </li>
  </ul>
</div>

<script type="text/javascript">
  var app = angular.module("myApp", []);

  app.controller("ListCtrl", function($scope) {
    $scope.items = [
      {name: "Item 1"},
      {name: "Item 2"},
      {name: "Item 3"}
    ];
  });

  app.controller("ItemCtrl", function($scope) {
    $scope.isVisible = true;
    $scope.hide = function() {
      $scope.isVisible = false;
    };
  });
</script>

编辑:重新阅读您的问题,看到您需要在父作用域中操作一堆子作用域,我认为您的指令方法是要走的路.我仍然认为这个答案可能对某些人有用,因为我在寻找这个答案时遇到了你的问题.

Answer 3

当在范围层次结构中工作时，我发现使用 $emit 和 $broadcast 调度事件非常有用。$emit 向上调度一个事件，以便您的子作用域可以将特定事件通知父作用域。$broadcast 则相反。

或者，由于子作用域可以访问父作用域属性，因此您可以通过在父作用域中的特定属性上使用 $watch 来触发更改。

更新：至于访问子作用域，这可能对您有用：Get to get all childscopes in Angularjs给定父作用域