需要时重新应用滤镜

Re-apply filter when needed

本文关键字：应用 滤镜 新应用      更新时间：2023-09-26

我自己写了一个简单的翻译过滤器:

angular.module('app')
    .filter('translate', translate);
translate.$inject = ['translation', 'language'];
function translate(translation, language) {
    return function(value) {
        var result = translation[language.getLanguage()][value];

        if (!result) {
            throw new Error("no translation");
        }
        return result;
    }
}

语言可以更改:登录后，用户可以使用与默认语言不同的语言。

但是，过滤器不会重新应用:仍然显示旧的翻译。当语言改变时，是否有方法再次执行过滤器?

在这个例子中，依赖项'language'是一个包含该语言的服务。getLanguage()返回该语言。

您采用了一种有趣但有缺陷的方法。只有当被过滤的值改变时，Angular过滤器才会重新应用，所以它们不适合实际改变输入本身。不过，你可以使用有状态过滤器来实现这一点，这是Angular 1.3中新增的一个特性。

你只需要在你的过滤器中设置$stateful属性为true，并确保注入了依赖项。这样，angular就会在必要时刷新过滤器。

下面是一个基于你的代码的例子。

filter('translate', ['translation', 'language', function (translation, language) {
    function translationFilter(value) {
        var result = translation[language.getLanguage()][value];
        if (!result) {
            throw new Error("no translation");
        }
        return result;
    }
    translationFilter.$stateful = true;    
    return translationFilter;
}]);

请注意，有状态过滤器可能会降低性能，因此如果这给您带来麻烦，您可以采用不同的方法。

更好的解决方案是使用angular-translate，它不仅以一种更可维护的方式为你处理所有这些，而且还提供了一个(有状态的)过滤器，做你想做的事情。

看一下这个API，例如:

相关文章：