javascript - 具有两种方式绑定(bind)的 Angular 指令，过滤器和 ng-repeat

Question

我正在尝试创建一个接受对象数组并运行 ng-repeat 来呈现它们的指令。

app.directive("rockers", function(){
    return {
        restrict : "E",
        replace : true,
        scope : {
            items : '='
        },
        template : '<div>'+
                       '<span ng-repeat="item in items">{{item.name}} Rocks!</span>'+
                    '</div>'

    };
});

在 Controller 中，我设置了对象的范围:

app.controller("appController", function($scope){
    $scope.scopedItems = [{name:"Aanny"}, {name:"Bonny"}, {name:"Danny"}];
});

然后，为了调用指令，我通过过滤器传递了 scopedItems，如下所示:

<div ng-app="myApp" ng-controller="appController">
    Rockers: 
    <rockers items="scopedItems | filter:{name:'Bonny'}"></rockers>
</div>

不使用 HTML 中的过滤器，一切正常。当通过过滤器时，我仍然得到了我想要的结果，但我也收到了这个错误:“未捕获错误:[$rootScope:infdig] 10 $digest() iterations reached.Aborting!”

我做错了什么？

这是一个jsFiddle link重现错误。

谢谢!

Answer 1

您还可以将过滤后的数据像字符串一样传递给指令:

<rockers items="{{ scopedItems | filter:{name:'Bonny'} }}"></rockers>

并解析它的值以反对它指令:

app.directive("rockers", function(){
    return {
        restrict : "E",
        replace : true,
        scope : {},
        link:function(scope, elem, attr){
            scope.items = JSON.parse(attr.items);
        },
        template : '<div>'+
                       '<span ng-repeat="item in items">{{item.name}} Rocks!</span>'+
                    '</div>'

    };
});

http://jsfiddle.net/34ag7/4/