ng-repeatの隔離されたスコープ・ディレクティブが期待通りに機能しない

Question

ng-repeatで1つの分離スコープ・ディレクティブとクリア・ボタン・ループがあります。

HTML

Controller (parent scope): 
<br /> kids: {{kids}} 
<br /> lonelyKid: {{lonelyKid}} 
<br /> 
<hr /> Directive (ng-repeat): 
<br /> 
<div ng-repeat="k in kids"> 
    <button ng-click="communicator.clear()">Clear Data</button> 
    <kid k="k" communicator="communicator"></kid> 
</div> 
<hr /> Directive (not ng-repeat): 
<br /> 
<button ng-click="communicator.clear()">Clear Data</button> 
<kid k="lonelyKid" communicator="communicator"></kid> 

JS

var app = angular.module('myApp', []); 
app.directive("kid", function() { 
    return { 
     restrict: 'E', 
     template: '<input type="text" ng-model="k.name"><br>{{k.name}}<br>', 
     scope: { 
      k: "=", 
      communicator: "=" 
     }, 
     controller: function($scope) { 
      $scope.k = angular.copy($scope.k); 
      $scope.communicator.clear = function() { 
       console.log($scope.k) 
       $scope.k.name = '' 
       console.log($scope.k) 
      } 
     } 
    }; 
}); 
app.controller('myController', function($scope) { 
    $scope.kids = [{ 
     name: "Ang", 
     age: 15 
    }, { 
     name: "Ying", 
     age: 14 
    }, { 
     name: "Ellie", 
     age: 2 
    }, { 
     name: "Smith", 
     age: 10 
    }]; 
    $scope.lonelyKid = { 
     name: "Ming", 
     age: 9 
    }; 
    $scope.communicator = {}; 
}); 

私はクリアボタン、各ディレクティブのコンテンツをクリックすると、クリアな取得する必要があります。しかし、私のコードで、最初の要素のクリアボタンをクリックすると、最初の要素ではなく、ng-repeatで最後の要素データがクリアされます。ループ内にない2nd、3rd、またはClearボタンをクリックすると同じですが、ループの最後の要素がクリアされます。

教えてください、なぜこれが起こっているのですか？どうすればこの問題を解決できますか？

Working example

Answer 1

は、これが起こっています関数ディレクティブを宣言するたびにオーバーライドされます。したがって、呼び出されているclear関数は、最後にリストの最後の要素を設定します。

指示文のscopeプロパティにcommunicator: "="を使用すると、コントローラと指示文の間にcommunicatorの双方向バインディングがあることを意味します。言い換えれば、あなたのコントローラーまたはあなたの指示文で$scope.communicatorを使用すると、同じオブジェクトを参照します。

これを修正する方法は、1人のコミュニケータを1人持つことができます（このコミュニケータオブジェクトの目的を実際に理解していないため、設計上の最適なソリューションではないかもしれません）。

実例はthis Plunkerを参照してください。

Answer 2

てみてください代わりに：

controller: function($scope) { 
    $scope.communicator.clear = function(kid) { 
    kid.name = ''; 
    } 
} 

そして、あなたのテンプレートで：あなたは一つだけcommunicator、及びそのclearを持っているので、

<div ng-repeat="k in kids"> 
    <button ng-click="communicator.clear(k)">Clear Data</button> 
    <kid k="k" communicator="communicator"></kid> 
</div> 
<hr /> Directive (not ng-repeat): 
<br /> 
<button ng-click="communicator.clear(lonelyKid)">Clear Data</button> 
<kid k="lonelyKid" communicator="communicator"></kid> 

https://plnkr.co/edit/tGcGQeWsEPtoSgRVumYQ?p=preview