Question

我正在尝试在具有隔离范围的指令中使用ng-repeat，但我似乎无法使其正常工作。

当我向我的指令添加隔离范围时，ng-repeat似乎无法看到我理解的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-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>

我做错了什么？

Answer 1

以下是使用隔离范围的工作示例。

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

Answer 2

看起来它在抱怨你的模板。

通过执行'<li data-ng-repeat="item in ' + scope.items + '">'，您实际上将scope.items转换为字符串。你不希望这样，你希望它通过你的items数组中的项目。

所以你会这样做：'<li data-ng-repeat="item in items">'

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

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）属性中的任何一个而不是混合它们。

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

2 个答案: