ng-repeat를 사용하고 각도 구성 요소로 고립 된 스코프를 사용할 수 있습니까?

Question

그래서 각도 요소에 객체를 전달하는 반복 블록이 있습니다. 나는 구성 요소는 다음과 같이 정의되는 것을 추가하는 것이 도움이 될 거라고 생각

: 즉,이

<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는 등의 이름, 주소, 전화 번호, 나이, 같은 평가자 객체의 다양한 분야 소요되며, 작은 상자에 깔끔하게을 표시

최종 편집 그 사람의 연락처 카드를 나타내는 것으로되어 있습니다. 그 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> 

있습니다 하나에서 다른 하나까지.

I는 해당 컨트롤러 < assessordedupequickcard> 요소의 범위 내에 존재 플래그를 뒤집어 isSource = 해당 플립 필요한 NG 반복 된 목록에서 첫 번째

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

를 선택.

그리고 NG-반복 목록에서

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

제

를 선택할 경우 다시 정의 컴포넌트의 제어기에 하나의 층 깊이 이동 및 isTarget = 해당 플립.

하지만 어떤 구성 요소가 플립 플립을 분리하는지 파악할 수 없습니다. 그들은 개별적으로 명명되지 않았기 때문에 모두 하나로 취급됩니다. 반복되는 사용자 지정 구성 요소 중 하나에 대한 변경 사항은 모든 사용자 지정 구성 요소에 발생합니다.

나는이 정보를 잘 설명해 주 었는지 확신 할 수 없다. 더 많은 정보가 있으면 알려 주시기 바랍니다. 누구든지이 점에 관해 제게 도움을 줄 수있는 도움에 미리 감사드립니다.

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은 :Plunker Demo