我可以使用ng-repeat并使用角度分量隔离范围吗？

Question

所以我有一个ng重复块，它将一个对象传递给一个角度组件。 看起来像这样

<div ng-repeat="assessor in $ctrl.dedupeDetail.matches">
    <assessordedupequickcard assessor="assessor"></assessordedupequickcard>
</div>

编辑：

我认为添加组件定义的内容可能会有所帮助。 这是代码

angular.module('assessor.dedupe')
    .component('assessordedupequickcard', {
        controller: 'assessorDedupeQuickcardController',
        templateUrl: 'src/app/assessor/dedupe/quickcard/assessor.dedupe.quickcard.html',
        bindings: {
            assessor: '<',
        }
    });

结束编辑

快速卡采用评估者对象中的各个字段，例如姓名，地址，电话号码，年龄等，并将它们干净地显示在一个小盒子中，该盒子应该代表该人的联系卡片。

在那张quickcard中有两个标签

<label ng-if="$ctrl.isSource" class="quickcard-list-header pull-right">FROM</label>
<label ng-if="$ctrl.isTarget" class="quickcard-list-header pull-right">TO</label>

在显示这些“联系人卡片”列表的视图中，您可以选择一张卡，然后选择另一张卡，并将信息从一张卡传输到另一张卡。

选择第一个时

<assessordedupequickcard assessor="assessor"></assessordedupequickcard>

从ng-repeated列表中，我需要在其控制器中翻转存在于<assessordedupequickcard>组件范围内的标志，并翻转isSource = true。

选择第二个时

<assessordedupequickcard assessor="assessor"></assessordedupequickcard>

从ng-repeated列表中，再次将一层深入到该自定义组件的控制器中并翻转其isTarget = true。

但我无法弄清楚如何隔离哪个组件将有一个标志翻转。 因为它们没有单独命名，所以它们都被视为一个。 我对其中一个重复的自定义组件所做的任何更改都会发生在所有自定义组件上。

我不确定我已经解释得很好，如果我能提供更多信息请告诉我。 在此先感谢任何人可以提供给我的任何帮助。

Answer 1

角度组件始终具有隔离范围（ 组件文档 ）。 现在，您只需要实现双向绑定并传递数据对象。 这使得控制器（包含重复组件）清楚地意识到每个组件内发生的任何数据更改。

页面HTML：

<div ng-controller="SampleCtrl">
  <h3>Repeated Components with Isolated Scope: </h3>
  <box ng-repeat="data in collection track by $index" data="data"></box>

  <h3>Parent Controller:</h3>
  <pre>{{collection| json}}</pre>
</div>

页面JS：

.controller('SampleCtrl', function($scope) {
  $scope.collection = [{
    name: 'A'
  }, {
    name: 'B'
  }, {
    name: 'C'
  }, {
    name: 'D'
  }, {
    name: 'E'
  }];

})

组件JS：

.component('box', {
    bindings: {
      data: '=?'
    },
    templateUrl: 'box.html',
    controllerAs: 'vm',
    controller: function() {
      var vm = this;
      vm.toggle = function() {
        vm.data.flagged = !vm.data.flagged;
      }
    }
  });

组件HTML：

<div class="box" ng-click="vm.toggle()">
  <p>{{vm.data}}</p>
</div>

Plunker演示