AngularJS 在自定义指令的 html 标记中使用自定义过滤器？答案

【问题标题】：AngularJS using a custom filter in the html tag of a custom directive?AngularJS 在自定义指令的 html 标记中使用自定义过滤器？
【发布时间】：2018-06-02 10:20:39
【问题描述】：

我有一个带有如下模板的指令：

<span> {{foo.bar}} {{foo.car}} {{foo.dar}}</span>

在多个位置调用。叫法是：

<foo-dir foo="fooData"></foo-dir>

有什么方法可以在 html 指令标签而不是指令本身中应用自定义过滤器？

我希望存在这样的东西：

ng-innertext-filter="filterName:params"

但这可能是一厢情愿。

如果这不可能，有没有办法在指令控制器中使用过滤器，而不必在使用指令的任何地方都应用它？

谢谢。

编辑：过滤代码：

import angular from 'angular';
function someFilter() {
    return (input, filterParam) => {
        if (input && filterParam && input.length)
            if(filterParam)
                return input.filterLogic();
        return input;
    }
}

过滤器在模板化字符串{{somedata | someFilter}} 中工作正常。但我正在寻找一种将过滤器应用于指令标签本身的方法。

【问题讨论】：

不确定是否理解您的问题。您能否提供当前过滤器的工作示例并显示您期望的结果？
是的，我正在尝试找到一种方法来对来自 html 标记中的指令的结果字符串使用过滤器。当前过滤器是：``` import angular from 'angular'; function SomeFilter() { return (input, filterParam) => { if (input && filterParam && input.length) { if(filterParam) { return input.filterLogic(); } } 返回输入；； } } 导出默认 angular.module('filters.someFilter', []) .filter('someFilter', SomeFilter) .name; ```
过滤器在模板化 {{stringData | someFilter:param}} 时有效，但我希望能够将过滤器应用于指令的结果字符串，而不是将其包含在指令本身中，因此它可以仅在特定区域使用
请使用此代码更新您的问题。在 cmets 中不太可读；)
编辑了原帖。对此感到抱歉。

标签： angularjs filter directive

【解决方案1】：

做你想做的事：

对来自 html 标记中的指令的结果字符串使用过滤器

您需要创建一个模板字符串并重新编译您的 DOM。

这是 AngularJS 的一个相当高级的用法。我希望你喜欢它:-)

var app = angular.module("app", []);

app.controller('ctrl', function ($scope) {
    $scope.foo = {
        bar: "1",
        car: "2",
        dar: "3"
    };
});

app.directive('foodir', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            foo: '=',   // Bind the variable to the directive's scope
            filter: '@' // Just get the string for compilation
        },
        link: function ($scope, $element, $attrs) {
            // This is the string on which you may want to apply a filter
            var string_template = '" bar:" + foo.bar + " car:" + foo.car + " dar:" + foo.dar';
            // Full string to compile without filter
            var html = '<span>{{' + string_template + '}}</span>';
            if ($scope.filter !== undefined)
                // Full string to compile with filter (optional)
                html = '<span>{{' + string_template + ' | '+$scope.filter+'}}</span>';
            console.log(html);
            var e = $compile(html)($scope); // Convert your string to a DOM element
            $element.replaceWith(e); // Make it the content of the directive
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <foodir foo="foo"></foodir>
  <hr/>
  <foodir foo="foo" filter="uppercase"></foodir>
  <hr/>
  <foodir foo="foo" filter="limitTo:10"></foodir>
</body>

现在，如果您只想对模板的某些部分（而不是完整字符串）应用过滤器，则可以避免使用 string_template 并使用如下基本插值：

var html = '<span> {{foo.bar}} {{foo.car}} {{foo.dar |' + $scope.filter + '}}</span>'

【讨论】：

使用$compile确实是高级的AngularJS。另外，我觉得没必要。这似乎与仅注入 $filter 并在将自定义过滤器附加到范围之前将其应用于输出的功能等效。
我最初也是这么想的。但是更深入地研究它，我发现无法将过滤器全局应用于 innerHTML。如果您有解决方案，我将很乐意阅读。更不用说应用过滤器及其通过元素属性提供的参数。
我认为，尽管实用价值有限，但有可能拥有更高优先级的独立指令，该指令可以进行短路编译，执行自己的编译，然后将指定的过滤器应用于输出。如果无论如何都要构建自定义指令，那么构建它以以更传统的方式应用过滤器会更实用。
听起来不错。我同意确实应该将此指令拆分为 2，foodir E 型和 filterdir A 型。我会尝试提出您建议的内容。我想明年，因为在那之前我几乎没有时间，而且这个问题有一个有效的答案 atm :-D 感谢@JCFord 的建议！

【解决方案2】：

我不确定您问题的第一部分是什么意思。如果您想将此过滤器应用于指令的编译结果，我不确定您是否可以。不过，我可以帮助在控制器中使用过滤器。

如果你像这样定义一个自定义的 AngularJS 过滤器：

app.filter('makeItPretty', function() {

    return function(value) {
        return value.toUpperCase();
    };

});

然后您可以通过注入内置的$filter 服务从控制器中访问您的过滤器：

app.controller('MyController', function($filter) {
    var makeItPretty = $filter('makeItPretty');
    var myPrettyText = makeItPretty('tHiS iS UgLy!');
});

【讨论】：

我更多地遵循了这条线索，但我最终得到了一些相当复杂的东西，并且过滤器仅适用于指令的某些部分，而不是全部。我认为解决方案需要重新编译。