AngularJS动态禁用过滤器

Question

我有一个用 Angular 构建的单页应用程序，带有 filter，负责用本地化字符串替换参考键。

示例：

{{'example.context.section.id'  | translate}}

我希望能够以编程方式禁用过滤器或覆盖它，以便它只输出密钥。重点是在模型上创建一个按钮，允许作者查看翻译键的实际上下文。

angular.module('***').filter('translate', function() {
    return function(input){ return input; }
});

我尝试在控制台中执行上述过滤器替换，但翻译仍然使用实际的翻译过滤器进行。

我还尝试在事后在配置块中使用$filterProvider，但这也没有效果。为此，我遵循了 (docs)[http://docs.angularjs.org/api/ng.$filterProvider] 上的指南。

angular.module('ltAccountApp').config(['$filterProvider', function($filterProvider){
    $filterProvider.register('translate', function(translate) { 
        return function(input) { return input; }
    });
}]);

还有这个基于文档的变体：

angular.module('ltAccountApp').run(['$provide', '$filterProvider', function($provide, $filterProvider){
    $provide.value('translate', function(input){ return input; });
    $filterProvider.register('translate', function(translate) { 
        return translate(input) || input;
    });
}]);

也许我可以将过滤器提供程序添加到代码中，并让它根据 rootscope 变量在 2 个选项之间切换？

感谢您的帮助和建议！

使用 AngularJS 1.08

Answer 1

您可以在$rootScope 上定义一个标志来控制过滤器行为。

angular.module('***')
.filter('translate', function($rootScope) {
  return function(input) {

    // define a `enableFilter` property in $rootScope to control filter behavior
    if ($rootScope.enableFilter) {
      // transform input here
      return transformedInput;
    } else {
      return input;
    }

  };
});