如何将过滤器传递给 AngularJS 中的指令

Question

我有一个自定义指令，我希望能够将过滤器名称传递给它。然后将在我的模板中使用该过滤器。这是我到目前为止得到的：

指令：

angular.module('forecastDirective', [])
.directive('forecast', ['appConfig', function(appConfig) {
    return {
        templateUrl: appConfig.directivesRoot + 'templates/forecast.html',
        replace: true,
        scope: {
            weatherObject: "=",
            convertToDate: "&",
            filterTemp: "@",
            dateFormat: "@",
        },
    }
}]);

模板：

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{ convertToDate({ dt: weatherObject.dt }) | date: dateFormat }}</h3>
    </div>
    <div class="panel-body">
        Daytime temperature: {{ weatherObject.temp.day | filterTemp }}
    </div>
</div>

Answer 1

您无需在控制器中访问它即可在视图中使用它。这就是过滤器的意义所在。如果您确实在控制器中需要它，您可以通过要求注入 filterTempFilter 来自行请求它。或者您可以注入 $filter 提供程序并从中请求您的特定过滤器。

Answer 2

一个非常简单的方法是，使用 $filter 服务和范围内的函数委托给正确的过滤器：

angular.module('forecastDirective', [])
.directive('forecast', ['appConfig', function(appConfig) {
    return {
        templateUrl: appConfig.directivesRoot + 'templates/forecast.html',
        replace: true,
        scope: {
            weatherObject: "=",
            convertToDate: "&",
            filterTemp: "@",
            dateFormat: "@",
        },
        controller: ['$filter', '$scope', function($filter, $scope) {
            $scope.filterFn = function(in) {
                return $filter($scope.filterTemp)(in);
            };
        }
    }
}]);

缺点是您不能再将其用作过滤器：

    <div class="panel-body">
        Daytime temperature: {{ filterFn(weatherObject.temp.day) }}
    </div>

我想预期的过滤函数 return 是一个原语（字符串、数字、布尔值）。如果它 return 是复杂的东西（对象、数组），您可能需要缓存 return 值以避免无限摘要循环。

你可以实现一个meta-filter:

angular.module(...)
    .filter('metafilter', ['$filter', function($filter) {
        return function(input, filterName) {
            return $filter(filterName)(input);
        };
    }]);

用作：

    <div class="panel-body">
        Daytime temperature: {{ weatherObject.temp.day | metafilter:filterTemp }}
    </div>

这是一个 fiddle 演示元过滤器：https://jsfiddle.net/opL1zfzd/

如何将过滤器传递给 AngularJS 中的指令

How to pass filter to a directive in AngularJS

directive

filter

angularjs