Javascript 具有双向绑定、过滤器和ng重复的角度指令

我试图创建一个接受对象数组的指令，并运行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>'

    };
});

然后，为了调用指令，我将scopedItems与filter一起传递，如下所示：

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

摇滚乐：

如果不使用HTML中的过滤器，一切正常。当通过过滤器时，我仍然得到我想要的结果，但我也得到了这个错误：“未捕获错误：[$rootScope:infdig]10$digest（）迭代已达到。正在中止！”

我做错了什么

下面是重新创建错误的步骤

---

谢谢

您可以按属性将rocker name传递到指令中，并在其中进行筛选：

<div ng-app="myApp" ng-controller="appController">
    Rockers: 
    <rockers name="Bonny" items="scopedItems"></rockers>
</div>

摇滚乐：

在指令中：

app.directive("rockers", function(){
    return {
        restrict : "E",
        replace : true,
        scope : {
            items : '='
        },
        link:function(scope, elem, attr){
            scope.filteredItems = function(filterItemName){
                return scope.items.filter(function(item){
                    return item.name == filterItemName;
                })
            };
            scope.filteredItem = scope.filteredItems(attr.name);
        },


        template : '<div>'+
                       '<span ng-repeat="item in filteredItem">{{item.name}} Rocks!</span>'+
                    '</div>'

    };
});

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>'

    };
});

app.directive（“rockers”，function（））{
返回{
限制：“E”，
替换：正确，
范围：{
项目：'='
},
链接：功能（范围、要素、属性）{
scope.filteredItems=函数（filterItemName）{
返回作用域.items.filter（函数（项）{
return item.name==filterItemName；
})
};
scope.filteredItem=scope.filteredItems（attr.name）；
},
模板：“”+
“{item.name}}Rocks！”+
''
};
});

---

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

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

并将其值解析为对象it指令：

app.directive("rockers", function(){
    return {
        restrict : "E",
        replace : true,
        scope : {
            items : '='
        },
        link:function(scope, elem, attr){
            scope.filteredItems = function(filterItemName){
                return scope.items.filter(function(item){
                    return item.name == filterItemName;
                })
            };
            scope.filteredItem = scope.filteredItems(attr.name);
        },


        template : '<div>'+
                       '<span ng-repeat="item in filteredItem">{{item.name}} Rocks!</span>'+
                    '</div>'

    };
});

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>'

    };
});

app.directive（“rockers”，function（））{
返回{
限制：“E”，
替换：正确，
作用域：{}，
链接：功能（范围、要素、属性）{
scope.items=JSON.parse（attr.items）；
},
模板：“”+
“{item.name}}Rocks！”+
''
};
});

您也可以在自定义筛选器中使用，以返回计算值，除非输入值发生更改

---

请参见此示例：

我发现了一个非常简单的解决方案，包括向指令中添加另一个双向绑定范围变量，并在指令模板中而不是在html中进行过滤：

<div ng-app="myApp" ng-controller="appController">
    <input type="text" ng-model="find"><br>
    Rockers: 
    <rockers items="scopedItems" filter="find"></rockers>
</div>

---

工作示例：

问题是，我不知道使用我的代码的程序员将通过什么进行过滤。这不仅仅是过滤器，它还发生在orderBy中。我希望程序员能注意到这一点，因为指令不应该预先知道他应该显示的最终列表是什么。你很接近了！它工作，但考虑过滤绑定数据，其中“邦尼”是来自范围的东西。请参见前面示例中的require模型中的示例，该示例不需要。