使用过滤器随着AngularJS指令 [英] Using Filters With Directives in AngularJS

问题描述

我试图在AngularJS指令中使用过滤器，但不知道到底如何做到这一点。从邮件列表上的一些信息看来，你应该能够注入$过滤器并使用它，但我不知道如何/在哪里调用它。

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>"
    };
}]);

虽然过滤器：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.

推荐答案

你的指令创建一个新的分离范围（范围：{'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 作为对指令的属性：

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

和对指令：

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

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

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