AngularJS：同时采用NG-重复如何体现在一个指令一个变量的变化到另一个指令 [英] AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat
问题描述
在第一种情况：我实现了一个指令指令2 ，将改变栏价值这也将得到体现在指令1 。结果
这里u能找到在 plunkr （第一种情况）搜索结果
在第二个案例：我实现了一个指令指令2 与 NG-重复一起使用这个指令改变栏价值，这就是的应该得到体现的在指令1 。结果
这里u能找到在 plunkr 为指令2 与 NG-重复（第二种情况）结果
我如何期望它的工作：我想在栏在指令1 来根据指令2 搜索
我的问题：第一种情况是工作我想要的方式。在第二种情况中的指令1 是根据指令2所做的更改不会改变我的。结果我的假设是，使用栏价值 NG-重复是创建多个范围，因此不工作就是我想要的。
我要如何解决这个问题？
HTML代码段（第二种情况）
＆LT;机身NG控制器=MainCtrl＆GT;
这是指令1：或其可指令1＆GT;＆下; /指令1＆GT;
＆LT; BR /＆GT;
＆LT; DIV NG重复=项目在[1,2]＆GT;
这是指令2为NG-重复{{项目}}
＆LT;指令2条=酒吧＆GT;＆LT; /指令2＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
JS代码片段（第二种情况）
VAR应用= angular.module（'对myApp'，[]）;app.directive（'指令1'，函数（）{
返回{
限制：'E'， 更换：真实，
模板：'＆LT; DIV＆GT;＆LT;跨度＆GT; {{}吧}＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'
} }）;app.directive（'指令2'，函数（）{
返回{
限制：'E'，
范围：{
巴：=
}，
更换：真实，
链接：功能（S，E，A）{
s.bar =更改值;
}，
模板：'＆LT; DIV＆GT;＆LT; B＆GT; {{}吧}＆LT; / B＆GT;＆LT; / DIV＆GT;'
}}）;app.controller（'MainCtrl'，函数（$范围）{
$ scope.name ='世界';
$ scope.bar =原值
}）;
您已经正确猜对了！这是因为创建子作用域NG-重复的发生。
当你在栏创建具有栏一个孤立的范围依赖设定操作是在设置栏值父范围。在的情况下，NG-重复父范围为 NG-重复的范围，因此这一行为。
使用一个对象，而不是字符串各地传递字符串的参考，也将努力。检查我的plunkr http://plnkr.co/edit/JCQsIXzRv9FUNfJwhOAB?p=$p$ PVIEW
设置栏变量
$ scope.data = {};
$ scope.data.bar =原值
User指令就像
＆LT;指令2条=data.bar＆GT;＆LT; /指令2＆GT;
In first case: I implemented a directive directive2 that will change bar value which will also get reflected in directive1.
Here u can find the plunkr (1st case)
In second case:I implemented a directive directive2, with ng-repeat used along with this directive that changes bar value and this is supposed to get reflected in directive1.
Here u can find the plunkr for directive2 with ng-repeat(2nd case)
How i expect it to work: i want the bar in directive1 to change according to the change in directive2
My question: 1st case is working the way i want. In the 2nd case my bar value in directive1 is not changing according to changes made in directive2.
My assumption is that using ng-repeat is creating multiple scopes and hence not working the way i want.
How do i solve this?
HTML snippet(2nd case)
<body ng-controller="MainCtrl">
this is directive1: <directive1></directive1>
<br />
<div ng-repeat="item in [1,2]">
this is directive2 for ng-repeat {{item}}
<directive2 bar="bar"></directive2>
</div>
</body>
JS snippet(2nd case)
var app = angular.module('myApp', []);
app.directive('directive1', function() {
return {
restrict: 'E',
replace: true,
template: '<div><span>{{bar}}</span></div>'
}
});
app.directive('directive2', function() {
return {
restrict: 'E',
scope:{
bar:"="
},
replace: true,
link:function(s,e,a){
s.bar = "Changed value";
},
template: '<div><b>{{bar}}</b></div>'
}
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.bar ="original value";
});
You have correctly guessed it! This is happening because of child scopes created by ng-repeat.
When you are creating a isolated scope with bar dependency the set operation on bar is setting the bar value on parent scope. In case of ng-repeat the parent scope is the ng-repeat scope and hence this behaviour.
Use a object instead of string to pass the string reference around and it will work. Check my plunkr http://plnkr.co/edit/JCQsIXzRv9FUNfJwhOAB?p=preview
Set bar variable as
$scope.data={};
$scope.data.bar ="original value";
User directive like
<directive2 bar="data.bar"></directive2>
这篇关于AngularJS：同时采用NG-重复如何体现在一个指令一个变量的变化到另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
