Question

我有一个模板的指令，如下所示：

<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}}中，过滤器可以正常工作。但我正在寻找一种方法将过滤器应用于指令标签本身。

Answer 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>'

Answer 2

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

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

<xsl:template match="@*|node()">
    <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
</xsl:template>

然后，您可以通过注入内置的app.filter('makeItPretty', function() { return function(value) { return value.toUpperCase(); }; });服务从控制器中访问您的过滤器：

$filter

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

2 个答案: