在AngularJS中将过滤器与指令一起使用

小编典典

在AngularJS中将过滤器与指令一起使用

angularjs

我正在尝试在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/获得，
在此先感谢您的答复。

阅读 213

2020-07-04

共1个答案

小编典典

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

通过tagFilter作为该指令的属性：

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

并在指令上：

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

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

2020-07-04