在 AngularJS 中使用带指令的过滤器 [英] Using Filters With Directives in AngularJS

问题描述

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

I'm attempting to use filters within an AngularJS directive but not sure exactly how to do so. From some info on the mailing list it appears that you should be able to inject $filter and use it, but I'm not sure how/where to invoke it.

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

My directive currently looks like this:

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

尽管 filter:tagFilter 不起作用.我应该如何过滤指令中的数据?

Although the filter:tagFilter isn't working. How should I filter my data in the directive?

JSfiddle 可在 http://jsfiddle.net/VDLqa/4/ 获得，在此先感谢任何回复.

JSfiddle available at http://jsfiddle.net/VDLqa/4/ Thanks in advance for any responses.

推荐答案

您正在指令 (scope: { 'fancyDisplay': '=' }) 上创建一个新的隔离作用域，即意味着您将无法从父作用域访问属性.由于 tagFilter 是在父作用域上定义的，因此您将无法访问它.

You're creating a new isolate scope on the directive (scope: { 'fancyDisplay': '=' }), that means you won't be able to access properties from the parent scope. Since tagFilter is defined on the parent scope, you won't be able to access it.

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

Pass tagFilter as an attribute to the directive:

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

关于指令:

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

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

这篇关于在 AngularJS 中使用带指令的过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！