在AngularJS中使用指令时使用过滤器

13 浏览
0 Comments

在AngularJS中使用指令时使用过滤器

我试图在AngularJS指令中使用过滤器，但不确定如何确切地使用。根据邮件列表上的一些信息，似乎应该能够注入$filter并使用它，但我不确定如何/在哪里调用它。

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

myApp.directive('fancyDisplay', ['$filter', function($filter) {
    return {
        scope: {
            'fancyDisplay': '='
        },
        template: "{{datum.name}}"
    };
}]);

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

可在http://jsfiddle.net/VDLqa/4/上找到JSfiddle。提前感谢任何回复。

0

2 答案

0 Comments

使用AngularJS中的指令时，可能会遇到一个问题：在ng-repeat指令中使用过滤器时，需要在指定track by之前进行过滤。下面是解决这个问题的方法：

首先，确保你的ng-repeat指令的声明是正确的，避免列表中有重复的项。

其次，需要在过滤器之前指定track by，如下所示：

app.directive("someDirective", function(){
    restrict: "E",
    template:"
  • {{t}}
",
});

请注意，反过来的写法是不起作用的。

0
0 Comments

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

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

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

然后在指令上：

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

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

嗯...如何扩展到多个过滤器呢？

定义更多属性：<div fancy-display="model.data" filter1="filter1" filter2="filter2"></div>然后在指令中：scope: { fancyDisplay: '=', filter1: '=', filter2: '=' }。注意：我将它们称为'filter1'和'filter2'，但您可以根据需要随意命名。此外，如果您开始有许多过滤器，我建议您在将数据发送到指令之前对ng-model数据进行预过滤。

预过滤是有趣的，因为这是我开始的地方。我在指令本身上尝试了这个方法，但它没有起作用；我应该如何更改这个fiddle来实现这个目标呢？

在监视器中添加类似这样的内容：$scope.model.filteredData = $filter('filter')($scope.model.data, $scope.tagFilter);并在HTML中：<div fancy-display="model.filteredData"></div> jsfiddle.net/bmleite/VDLqa/6（注意：不要忘记在控制器中注入$filter）。

谢谢！我只是忘记添加['$filter', function($filter)。

0