Изолированная директива scope в ng-repeat не работает, как ожидалось

Question

У меня есть одна изолированная директива по областям и четкая петля в ng-repeat.

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

Это происходит потому, что у вас есть только один communicator, и его clear функция получает переопределение при каждом объявлении директивы. Таким образом, вызываемая функция clear является последней, которую вы установили в своем случае последним элементом списка.

Используя communicator: "=" в свойстве scope вашей директивы, это означает, что у вас есть двусторонняя привязка для communicator между вашим контроллером и вашей директивой. Другими словами, использование $scope.communicator в вашем контроллере или в вашей директиве относится к одному и тому же объекту.

Способ исправить это может быть один коммуникатор на одного ребенка (хотя это, возможно, не лучшее решение с точки зрения дизайна, поскольку я действительно не понимаю цель этого объекта коммуникатора).

См. this Plunker для примера.

Answer 2

Try, что вместо того, чтобы:

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

И в шаблоне:

<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