feat(filter): add new option $translate.statefulFilter()

Solves #945
angular-translate · Apr 8, 2015 · dec4bf3 · dec4bf3
1 parent dbd5be9
commit dec4bf3
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 4 deletions.
diff --git a/src/filter/translate.js b/src/filter/translate.js
@@ -60,9 +60,9 @@ angular.module('pascalprecht.translate')
     return $translate.instant(translationId, interpolateParams, interpolation);
   };
 
-  // Since AngularJS 1.3, filters which are not stateless (depending at the scope)
-  // have to explicit define this behavior.
-  translateFilter.$stateful = true;
+  if ($translate.statefulFilter()) {
+    translateFilter.$stateful = true;
+  }
 
   return translateFilter;
 }]);
diff --git a/src/service/translate.js b/src/service/translate.js
@@ -32,7 +32,8 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
       $postCompilingEnabled = false,
       NESTED_OBJECT_DELIMITER = '.',
       loaderCache,
-      directivePriority = 0;
+      directivePriority = 0,
+      statefulFilter = true;
 
   var version = 'x.y.z';
 
@@ -784,6 +785,31 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
     }
   };
 
+  /**
+   * @ngdoc function
+   * @name pascalprecht.translate.$translateProvider#statefulFilter
+   * @methodOf pascalprecht.translate.$translateProvider
+   *
+   * @description
+   * Since AngularJS 1.3, filters which are not stateless (depending at the scope)
+   * have to explicit define this behavior.
+   * Sets whether the translate filter should be stateful or stateless. The standard value is `true`
+   * meaning being stateful.
+   * Calling this function without an argument will return the current value.
+   *
+   * @param {boolean} state - defines the state of the filter
+   */
+  this.statefulFilter = function (state) {
+    if (state === undefined) {
+      // getter
+      return statefulFilter;
+    } else {
+      // setter with chaining
+      statefulFilter = state;
+      return this;
+    }
+  };
+
   /**
    * @ngdoc object
    * @name pascalprecht.translate.$translate
@@ -1804,6 +1830,11 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
         return directivePriority;
       };
 
+      // internal purpose only
+      $translate.statefulFilter = function () {
+        return statefulFilter;
+      };
+
       if ($loaderFactory) {
 
         // If at least one async loader is defined and there are no

diff --git a/test/unit/filter/translate.spec.js b/test/unit/filter/translate.spec.js
@@ -175,4 +175,87 @@ describe('pascalprecht.translate', function () {
       expect($translate('FOO2')).toEqual('-+-+ FOO2 -+-+');
     }));
   });
+
+  describe('filter should be stateful', function () {
+
+    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
+      $translateProvider
+        .translations('en', {
+          'HELLO': 'Hello'
+        })
+        .translations('de', {
+          'HELLO': 'Hallo'
+        })
+        .preferredLanguage('en');
+    }));
+
+    var $translate, $rootScope, $compile, $timeout;
+    beforeEach(inject(function (_$rootScope_, _$compile_, _$translate_, _$timeout_) {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+      $translate = _$translate_;
+      $timeout = _$timeout_;
+    }));
+
+    it('filter should be re-evaluated on language change', function (done) {
+      var element = $compile(angular.element('<div>{{"HELLO" | translate}}</div>'))($rootScope);
+      $rootScope.$digest();
+      expect(element.html()).toEqual('Hello');
+      $translate.use('de');
+      setTimeout(function () {
+        $rootScope.$digest();
+        expect(element.html()).toEqual('Hallo');
+        done();
+      }, 100);
+    });
+  });
+
+  describe('filter can be optionally stateless', function () {
+
+    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
+      $translateProvider
+        .translations('en', {
+          'HELLO': 'Hello'
+        })
+        .translations('de', {
+          'HELLO': 'Hallo'
+        })
+        .preferredLanguage('en')
+        .statefulFilter(false);
+    }));
+
+    var $translate, $rootScope, $compile, $timeout;
+    beforeEach(inject(function (_$rootScope_, _$compile_, _$translate_, _$timeout_) {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+      $translate = _$translate_;
+      $timeout = _$timeout_;
+    }));
+
+    if (angular.version.major === 1 && angular.version.minor >= 3) {
+      it('filter should be not re-evaluated on language change', function (done) {
+        var element = $compile(angular.element('<div>{{"HELLO" | translate}}</div>'))($rootScope);
+        $rootScope.$digest();
+        expect(element.html()).toEqual('Hello');
+        $translate.use('de');
+        setTimeout(function () {
+          $rootScope.$digest();
+          expect(element.html()).toEqual('Hello'); // regardless the language change (scope)
+          done();
+        }, 100);
+      });
+    } else {
+      it('filter should be re-evaluated on language change', function (done) {
+        var element = $compile(angular.element('<div>{{"HELLO" | translate}}</div>'))($rootScope);
+        $rootScope.$digest();
+        expect(element.html()).toEqual('Hello');
+        $translate.use('de');
+        setTimeout(function () {
+          $rootScope.$digest();
+          expect(element.html()).toEqual('Hallo');
+          done();
+        }, 100);
+      });
+    }
+  });
 });