Angularjs ng repeat中的隔离作用域指令未按预期工作_Angularjs_Angularjs Directive_Angularjs Ng Repeat

Angularjs ng repeat中的隔离作用域指令未按预期工作

angularjs

Angularjs ng repeat中的隔离作用域指令未按预期工作,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,我有一个孤立的作用域指令和明确的按钮循环在ng重复 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="commu

我有一个孤立的作用域指令和明确的按钮循环在ng重复

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>

控制器（父范围）：

孩子：{{kids}

lonelyKid:{{lonelyKid}


指令（ng重复）：


清晰数据
指令（不重复）：


清晰数据

var-app=angular.module（'myApp'，[]）；
应用指令（“kid”，函数（）{
返回{
限制：'E'，
模板：“
{{k.name}
”，
范围：{
k:“=”，
通讯器：“=”
},
控制器：功能（$scope）{
$scope.k=angular.copy（$scope.k）；
$scope.communicator.clear=函数（）{
log（$scope.k）
$scope.k.name=''
log（$scope.k）
}
}
};
});
app.controller（'myController'，函数（$scope）{
$scope.kids=[{
姓名：“Ang”，
年龄:15
}, {
姓名:"英",，
年龄:14
}, {
姓名：“Ellie”，
年龄:2
}, {
姓名：“史密斯”，
年龄:10
}];
$scope.lonelyKid={
姓名:"明",，
年龄:9
};
$scope.communicator={}；
});

当我点击“清除”按钮时，相应的指令内容应该得到清除。但在我的代码中，若我点击了第一个元素的clear按钮，那个么它将清除ng repeat中的最后一个元素数据，而不是第一个元素。同样，若我们点击循环中不存在的第二、第三或清除按钮，它会清除循环的最后一个元素

请告诉我，为什么会这样？我怎样才能解决这个问题呢

试试看：

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>


清晰数据
指令（不重复）：


清晰数据

试试看：

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>


清晰数据
指令（不重复）：


清晰数据

之所以发生这种情况，是因为您只有一个

通信器

，并且每次声明指令时，其

清除

功能都会被覆盖。因此，调用的

clear

函数是您设置的最后一个函数，在您的例子中，是列表的最后一个元素

通过使用指令的

范围

属性中的

通信器：“=”

，这意味着您的控制器和指令之间有一个

通信器

的双向绑定。换句话说，在控制器或指令中使用

$scope.communicator

表示同一对象

解决这一问题的一种方法是每个孩子有一个通信器（尽管这可能不是设计方面的最佳解决方案，因为我并不真正理解这个通信器对象的用途）

有关工作示例，请参阅。