我正在尝试使用ng-repeat和指令显示数组的元素。指令部分对解决方案很重要。但是,数组的元素未绑定并显示空值。
小提琴可以在http://jsfiddle.net/qrdk9sp5/
找到HTML
<div ng-app="app" ng-controller="testCtrl">
{{chat.words}}
<test ng-repeat="word in chat.words"></test>
</div>
JS
var app = angular.module('app', []);
app.controller("testCtrl", function($scope) {
$scope.chat = {
words: [
'Anencephalous', 'Borborygm', 'Collywobbles'
]
};
});
app.directive('test', function() {
return {
restrict: 'EA',
scope: {
word: '='
},
template: "<li>{{word}}</li>",
replace: true,
link: function(scope, elm, attrs) {}
}
});
输出
["Anencephalous","Borborygm","Collywobbles"]
•
•
•
预期输出
["Anencephalous","Borborygm","Collywobbles"]
•Anencephalous
•Borborygm
•Collywobbles
感谢您的帮助
答案 0 :(得分:5)
您没有绑定word
。
您使用过隔离范围。如果你没有绑定它的scope
属性,它将无效。
scope: {
word: '='
},
试试这个
<test word="word" ng-repeat="word in chat.words"></test>
的 DEMO
强>
答案 1 :(得分:0)
var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
$scope.chat= {words: [
'Anencephalous', 'Borborygm', 'Collywobbles'
]};
});
app.directive('test', function() {
return {
restrict: 'EA',
scope: {
word: '='
},
priority: 1001,
template: "<li>{{word}}</li>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});
您的指令需要在ng-repeat之前使用更高的优先级运行,因此当ng-repeat克隆该元素时,它可以选择您的修改。
Directives user guide的“编译/链接分离背后的原因”部分对how ng-repeat works有解释。
当前的ng-repeat优先级为1000,因此任何高于此值的都应该这样做。