如何在带有隔离作用域的指令中使用ng-重复？
我试图在具有隔离作用域的指令中使用ng-重复，但我似乎无法让它工作。
当我向指令中添加隔离作用域时，ng重复似乎无法看到items，我理解这一点。
但是，即使使用=隔离作用域，也会收到错误消息：
Error: Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object],[object Object],[object Object]] starting at [Object],[object Object],[object Object]].
下面是在没有隔离作用域的指令中工作的ng-重复的jsFiddle：
http://jsfiddle.net/urlology/DA47k/3/
并使用=隔离作用域：
http://jsfiddle.net/urlology/CL4AT/11/
作为代码片段：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.open = false;
$scope.items = [{
name: 'A',
value: 1
},
{
name: 'B',
value: 2
},
{
name: 'C',
value: 3
}
];
});
app.directive('myDirective', ['$compile', function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var items = attrs.items;
console.log('items %o', items);
var itemLabelField = attrs.itemLabelField
var template =
'<ul>' +
'<li data-ng-repeat="item in ' + items + '">' +
'{{item.' + itemLabelField + '}}' +
'</li>' +
'</ul>';
// Render the template.
element.html('').append($compile(template)(scope));
}
}
}]);<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div my-directive items="items" item-label-field="name"></div>
</body>
</html>
我做错了什么？
回答 1
Stack Overflow用户
发布于 2013-10-24 00:26:41
好像是在抱怨你的模板。
通过执行'<li data-ng-repeat="item in ' + scope.items + '">'，您实际上是在将scope.items转换为字符串。您不希望这样，您希望它遍历项数组中的项。
所以你会这么做：'<li data-ng-repeat="item in items">'
您已经通过scope属性将项添加到范围中：
scope: {
items: "=",
itemLabelField: "@" //read below
}这足以解决您的问题，但正如您所知，我还添加了itemLabelField，因此您不需要使用var itemLabelField = attrs.itemLabelField。@ binder按值而不是父范围绑定。
所以，与'{{item.' + itemLabelField + '}}'不同，您可以执行'{{item[itemLabelField]}}'。
现在，您将发现您的链接函数只有一个普通的字符串模板和一个编译。理想情况下，您应该使用一个模板属性，而不是在元素中手动插入代码。
template:
'<ul>' +
'<li ng-repeat="item in items">' +
'{{item[itemLabelField]}}' +
'</li>' +
'</ul>'您甚至可以将其放在单独的文件中，并使用templateUrl属性。
以下是完全更改的代码：http://jsfiddle.net/DA47k/12/
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.open = false;
$scope.items = [
{ name: 'A', value: 1 },
{ name: 'B', value: 2 },
{ name: 'C', value: 3 }
];
});
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
items: "=",
itemLabelField: "@"
},
template:
'<ul>' +
'<li ng-repeat="item in items">' +
'{{item[itemLabelField]}}' +
'</li>' +
'</ul>'
}
});为了一致性起见，只需使用ng-xxxx或data-ng-xxxx (或ng:xxxx)属性，而不是混合它们。
https://stackoverflow.com/questions/19553627
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号