AngularJS:如何在使用 ng-repeat 时将一个指令中的变量更改反映到另一个指令中 [英] AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat
问题描述
在第一种情况:我实现了一个指令 directive2，它将改变 bar 值，这也将反映在 directive1 中代码>.
您可以在此处找到 plunkr(第一种情况)
在第二种情况:我实现了一个指令directive2，与ng-repeat一起使用的这个指令改变了bar值，这应该反映在directive1中.
在这里您可以找到 directive2<的 plunkr/code> 与 ng-repeat(第二种情况)
我希望它如何工作:我希望 directive1 中的 bar 根据 directive2 中的变化而改变代码>
我的问题:第一个案例正在按我想要的方式工作.在第二种情况下，directive1 中的 bar 值不会根据 directive2 中所做的更改而改变.
我的假设是使用 ng-repeat 正在创建多个范围，因此无法按我想要的方式工作.
我该如何解决这个问题?
HTML 代码段(第二种情况)
这是指令 1:<directive1></directive1><br/><div ng-repeat="[1,2] 中的项目">这是 ng-repeat {{item}} 的指令 2<directive2 bar="bar"></directive2>JS 代码段(第二种情况)
var app = angular.module('myApp', []);app.directive('directive1', function() {返回 {限制:'E'，替换:真的，模板:'<div><span>{{bar}}</span></div>'}});app.directive('directive2', function() {返回 {限制:'E'，范围:{栏:"="},替换:真的，链接:功能(s，e，a){s.bar = "改变的值";},模板:'<div><b>{{bar}}</b></div>'}});app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.bar ="原始值";});你猜对了！这是因为 ng-repeat 创建的子作用域.
当您创建具有 bar 依赖性的独立作用域时，bar 上的设置操作是在父作用域上设置 bar 值.在 ng-repeat 的情况下，父作用域是 ng-repeat 作用域，因此是这种行为.
使用对象而不是字符串来传递字符串引用，它会起作用.检查我的 plunkr http://plnkr.co/edit/JCQsIXzRv9FUNfJwhOAB?p=preview
设置条形变量为
$scope.data={};$scope.data.bar ="原始值";像
这样的用户指令<directive2 bar="data.bar"></directive2>
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-repeat 时将一个指令中的变量更改反映到另一个指令中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
