fix(translateCloak): incorrect element reference, inappropriate declo…

…ak at onReady, inappropriate decloak at $translateChangeSuccess

In some instances, the element actually injected and populated in the DOM appears to be a copy of the template element passed to $compile. In this situation, although translate-cloak's logic operates normally, the changes apply to the template, not the actual DOM content, so the cloak is never removed. This fix changes the operative element reference post-compile to the element reference provided to the postLink function, which always references the actual DOM content, thereby propagating the changes as expected. The erroneous behavior was observed when applying translate-cloak inside a directive template

The cloaked element always decloaks at onReady, even if a translationId is provided to trigger the cloak/decloak process. This behavior is inappropriate, as can be observed when using $translatePartialLoader; adding a new part results in additional strings being loaded, but the cloak does not wait for the given translationId to resolve, resulting in a flash of untranslated content. The solution is to only register the onReady handler if an explicit translationId to listen for has not been provided.

After fixing the timing and lifecycle issues in $translate.refresh, I realized that the $translateChangeSuccess handler is actually a bug; it was needed before to trigger the decloak because the $translate.then call in the $observe('translateCloak') handler would inappropriately experience a cache miss if it was invoked during a $translate.refresh cycle, but now that I fixed that the $translateChangeSuccess decloak is inappropriately decloaking elements before they are ready to be decloaked. It makes sense that this handler would not be necessary, as the expected behavior when specifying a decloak key is for the element to decloak if and only if the specified translation is loaded successfully. This change is dependent on first merging my fixes to $translate.refresh or there will be regressions in the cloak.

PR #1694
Solves #1556
Solves #1480

src/directive/translate-cloak.js

@@ -2,7 +2,6 @@ angular.module('pascalprecht.translate')
 /**
  * @ngdoc directive
  * @name pascalprecht.translate.directive:translateCloak
- * @requires $rootScope
  * @requires $translate
  * @restrict A
  *
@@ -22,34 +21,32 @@ angular.module('pascalprecht.translate')
  */
 .directive('translateCloak', translateCloakDirective);
 
-function translateCloakDirective($translate, $rootScope) {
+function translateCloakDirective($translate) {
 
   'use strict';
 
   return {
-    compile: function (tElement) {
-      var applyCloak = function () {
-        tElement.addClass($translate.cloakClassName());
-      },
-      removeCloak = function () {
-        tElement.removeClass($translate.cloakClassName());
-      };
-      $translate.onReady(function () {
-        removeCloak();
-      });
-      applyCloak();
+    compile : function (tElement) {
+      var applyCloak = function (element) {
+          element.addClass($translate.cloakClassName());
+        },
+        removeCloak = function (element) {
+          element.removeClass($translate.cloakClassName());
+        };
+      applyCloak(tElement);
 
       return function linkFn(scope, iElement, iAttr) {
+        //Create bound functions that incorporate the active DOM element.
+        var iRemoveCloak = removeCloak.bind(this, iElement), iApplyCloak = applyCloak.bind(this, iElement);
         if (iAttr.translateCloak && iAttr.translateCloak.length) {
           // Register a watcher for the defined translation allowing a fine tuned cloak
           iAttr.$observe('translateCloak', function (translationId) {
-            $translate(translationId).then(removeCloak, applyCloak);
-          });
-          // Register for change events as this is being another indicicator revalidating the cloak)
-          $rootScope.$on('$translateChangeSuccess', function () {
-            $translate(iAttr.translateCloak).then(removeCloak, applyCloak);
+            $translate(translationId).then(iRemoveCloak, iApplyCloak);
           });
         }
+        else {
+          $translate.onReady(iRemoveCloak);
+        }
       };
     }
   };