我可以使用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演示