Javascript 如何在具有隔离范围的指令中使用ng repeat？

我试图在具有隔离作用域的指令中使用ng repeat，但似乎无法使其工作

当我在指令中添加隔离作用域时，ng repeat似乎无法看到我理解的

项

但是，即使我使用
=
隔离作用域，也会收到错误消息：

错误：语法错误：标记“Object”是意外的，在表达式[[Object-Object]、[Object-Object]、[Object-Object]、[Object-Object]]的第9列应为[]]，从[Object]、[Object-Object]、[Object-Object]]开始。

以下是在没有隔离作用域的指令中工作的JSFIDLE ng repeat：


并使用
=
隔离范围：


作为代码片段：


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.open=false；
$scope.items=[{
名称：‘A’，
价值：1
},
{
名称：‘B’，
价值：2
},
{
名称：‘C’，
价值：3
}
];
});
app.directive（'myDirective'，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var项目=属性项目；
console.log（'items%o'，items）；
var itemLabelField=attrs.itemLabelField
变量模板=
“
”+
“
”+
“{item.+itemLabelField+'}}”+
“
”+
“
”；
//呈现模板。
html（“”）.append（$compile（template）（scope））；
}
}
}]);
下面是一个使用隔离作用域的工作示例


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

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));
    }
}
}]);

app.directive（'myDirective'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
项目：'='
},    
链接：函数（范围、元素、属性）{
变量模板=
“
”+
“
”+
“{item.name}”+
“
”+
“
”；
//呈现模板。
html（“”）.append（$compile（template）（scope））；
}
}
}]);
下面是一个使用隔离作用域的工作示例


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

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));
    }
}
}]);

app.directive（'myDirective'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
项目：'='
},    
链接：函数（范围、元素、属性）{
变量模板=
“
”+
“
”+
“{item.name}”+
“
”+
“
”；
//呈现模板。
html（“”）.append（$compile（template）（scope））；
}
}
}]);
看起来它在抱怨你的模板

通过执行
“
”
实际上是将scope.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>'

模板：
“
”+
“
”+
“{item[itemLabelField]}”+
“
”+
“
”

您甚至可以将它放在一个单独的文件中，并使用templateUrl属性

以下是更改后的完整代码：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.open=false；
$scope.items=[
{name:'A'，值：1}，
{name:'B'，值：2}，
{name:'C'，值：3}
];
});
app.directive（'myDirective'，function（）{
返回{
限制：“A”，
范围：{
项目：“=”，
itemLabelField:“@”
},
模板：
“
”+
“
”+
“{item[itemLabelField]}”+
“
”+
“
”
}
});

另外，为了保持一致性，请使用ng xxxx或data ng xxxx（或ng:xxxx）属性之一，而不是将它们混合使用。
看起来它在抱怨您的模板

通过执行
“
”
实际上是将scope.items转换为字符串。您不希望这样，而是希望它遍历项目数组中的项目

所以您可以这样做：
”
”

您已经通过scope属性向范围中添加了项：

scope: {
    items: "=",
    itemLabelField: "@" //read below
}

这足以解决您的问题，但正如您所知，我还添加了itemLabelField，因此您不需要使用
var itemLabelField=attrs.itemLabelField
。@binder按值绑定，而不是按父对象的范围绑定

因此，您可以执行
{{item[itemLabelField]}}而不是
{{item[itemLabelField]}}

现在，您将发现链接函数只有一个带有编译的纯字符串模板。理想情况下，您应该使用模板属性，而不是在模板中手动插入代码