gpt4 book ai didi

javascript - 如何在具有隔离范围的指令中使用 ng-repeat?

转载 作者:行者123 更新时间:2023-11-30 10:25:58 24 4
gpt4 key购买 nike

我正在尝试在具有隔离作用域的指令中使用 ng-repeat,但我似乎无法让它工作。

当我向我的指令添加隔离范围时,ng-repeat 似乎无法看到 items,我理解这一点。

但是,即使我使用 = 隔离范围,我也会收到错误消息:

错误:语法错误: token “Object”是意外的,期望 []] 在表达式 [[object Object],[object Object],[object Object]] 的第 9 列从 [Object] 开始, [object 对象],[object 对象]].

这是在没有隔离范围的指令中工作的 ng-repeat 的 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>

我做错了什么?

最佳答案

这是一个使用隔离作用域的工作示例。

http://jsfiddle.net/DA47k/6/

您只需要使用“=”将对象传递到隔离范围,然后您就可以使用点符号在模板中访问它的属性,而不是将它们传递到新属性中。

app.directive('myDirective', ['$compile', function($compile) {
return {
restrict: 'A',
scope: {
items: '='
},
link: function(scope, element, attrs) {

var template =
'<ul>' +
'<li data-ng-repeat="item in items">' +
'{{item.name}}' +
'</li>' +
'</ul>';

// Render the template.
element.html('').append($compile(template)(scope));
}
}
}]);

关于javascript - 如何在具有隔离范围的指令中使用 ng-repeat?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19553627/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com