1

我正在尝试在具有隔离范围的指令中使用 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>

我究竟做错了什么？

4

2 回答 2

3

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

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));
    }
}
}]);
于 2013-10-23T23:38:46.810 回答
1

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

通过这样做'<li data-ng-repeat="item in ' + scope.items + '">'，您实际上是将 scope.items 转换为字符串。您不希望这样，您希望它遍历 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）属性之一，而不是混合它们。

于 2013-10-24T00:26:41.117 回答