我正在使用指令来模板对象列表。根据使用指令的位置,应过滤模板中呈现的对象列表。在一种方法中,代码如下所示:
person_list.html
<ul>
<li ng-repeat="person in (people | selected:true)">
<a class="selected-{{ person.selected }}" ng-click="toggleSelect( person )">{{ person.name }}</a>
</li>
</ul>
person_list.js
app.directive('personList', function(){
return {
restrict: 'E',
scope: {people: '=list'},
controller: "ListCtrl",
templateUrl: 'person_list.html'
}
});
selected_filter.js
app.filter('selected', function(){
return function(list, criteria){
return list.filter(function(element){
return !!element.selected === criteria;
});
}
});
该指令的使用如下:
<person-list list="people"></person-list>
我想使用的另一种方法是从指令外部过滤列表:
person_list.html
<ul>
<li ng-repeat="person in people">
<a class="selected-{{ person.selected }}" ng-click="toggleSelect( person )">{{ person.name }}</a>
</li>
</ul>
该指令将按如下方式使用:
<person-list list="people | selected:true"></person-list>
然而,Angular 不喜欢这样。Cannot call method 'filter' of undefined
过滤器内部抛出异常。一个目标是使指令尽可能简单,部分原因是让这个过滤器成为一个可选组件。
我想知道的是:
- 为什么第一种方法有效而第二种方法无效?
- 哪些替代方法可以满足这些要求?
请参阅完整的 Plunker 示例。