我试图将范围数组元素传递给指令并在指令中更改该元素的值,但是当我打印范围元素的值时,在指令范围内进行的更改在父范围中不受影响。我创建了隔离范围,并在范围内使用'='
提供了两种方式的绑定,但它没有对父范围进行任何更改。
附加代码
Index.html
<div ng-app="dr" ng-controller="testCtrl">
<test word="word" ng-repeat="word in chat.words"></test>
<button ng-click="find();">
click
</button>
</div>
Javascript部分
var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
$scope.chat= {words: [
'first', 'second', 'third'
]};
$scope.find = function(){
alert(JSON.stringify($scope.chat, null, 4));
}
});
app.directive('test', function() {
return {
restrict: 'EA',
scope: {
word: '='
},
template: "<input type='text' ng-model='word' />",
replace: true,
link: function(scope, elm, attrs) {
}
}
});
我的大部分搜索都返回将
'='
放在指令范围内将解决此问题,但是这样做并不走运。任何人都可以指出问题所在,以及如何在父范围中反映该值。 最佳答案
您将字符串传递给指令,并且此字符串未被引用,因为它不再与您的数组相关
我想你必须适当地更改数组
类似于以下内容的东西应该起作用:
var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
$scope.word = 'test';
$scope.chat= {words: [
{'name':'first'}, {'name': 'second'}, {'name' : 'third'}
]};
$scope.find = function(){
alert(JSON.stringify($scope.chat, null, 4));
}
});
app.directive('test', function() {
return {
restrict: 'EA',
scope: {
word: '='
},
template: "<input type='text' ng-model='word.name' />",
replace: true,
link: function(scope, elm, attrs) {
}
}
});
<div ng-app="dr" ng-controller="testCtrl">
<pre>{{chat.words}}</pre>
<test word="word" ng-repeat="word in chat.words"></test>
<button ng-click="find();">
click
</button>
</div>