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>

在视图中列出这些，＆＃34;联系卡＆＃34;显示有一项功能，您可以选择一张卡，然后选择另一张卡，并将信息从一张卡传输到另一张卡。

选择第一个

时

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

从ng-repeated列表

我需要翻转一个存在于该＆lt; evaluateordedupequickcard＆gt;组件在其控制器中的范围和翻转isSource = true。

选择第二个时

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

从ng-repeated列表

再次将一层深入到该自定义组件的控制器中并翻转其isTarget = true。

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

我不确定我是否已经解释过这个问题，如果我能提供更多信息请告诉我。提前感谢任何人可以提供给我的任何帮助。

Answer 1

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

页面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 Demo

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

1 个答案: