AngularJS disable filter dyamically

Question

I have a single page app built with angular with a filter that is responsible for substituting localized strings for reference keys.

Example:

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

I want to be able to disable the filter programmatically or overwrite it so that it just outputs the key. The point is to create a button on the mockups that allow the writers to view the translation keys their actual context.

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

I tried just executing the above filter replacement in the console but the translations still occur using the actual translate filter.

I also tried using $filterProvider in a config block after-the-fact but this also had no effect. I followed the guide on the (docs)[http://docs.angularjs.org/api/ng.$filterProvider] for this.

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

Also this variation based on the docs:

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;
    });
}]);

Maybe I could add the filter provider to the code and have it switch between the 2 options based on a rootscope variable?

Thanks for your help and suggestions!

Using AngularJS 1.08

Answer 1

You can define a flag on $rootScope to control filter behavior.

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;
    }

  };
});