Question

我正在尝试在AngularJS指令中使用过滤器，但不确定如何做到这一点。从邮件列表上的一些信息来看，您应该能够注入$ filter并使用它，但我不确定如何/在何处调用它。

我的指令目前看起来像这样：

myApp.directive('fancyDisplay', ['$filter', function($filter) {
    return {
        scope: {
            'fancyDisplay': '='
        },
        template: "<div ng-repeat='datum in fancyDisplay | filter:tagFilter'>{{datum.name}}</div>"
    };
}]);

虽然filter:tagFilter无效。我应该如何在指令中过滤我的数据？

JSfiddle可在http://jsfiddle.net/VDLqa/4/处获得。提前感谢您的回复。

Answer 1

您正在指令（scope: { 'fancyDisplay': '=' }）上创建新的隔离范围，这意味着您将无法从父范围访问属性。由于在父作用域上定义了tagFilter，因此您将无法访问它。

将tagFilter作为属性传递给指令：

<div fancy-display="model.data" filter="tagFilter"></div>

在指令上：

scope: {
    fancyDisplay: '=',
    tagFilter: '=filter'
},

jsfiddle ：http://jsfiddle.net/bmleite/VDLqa/5/

Answer 2

感谢@bmleite的回答。

另一件可能有用的事情是确保声明这样你的ng-repeat指令就会让你感到沮丧你的清单。

我花了很长时间才弄明白这一点。显然你必须过滤在您按x：

指定曲目之前

app.directive("someDirective", function(){ ...

    restrict: "E",
    ...
    template:"<ul ng-repeat='t in tree | filter:key track by $index'><li>{{t}}</li></ul>",

});

逆转不起作用。

在AngularJS中使用具有指令的过滤器

2 个答案: