fix(directive): Fix behavior of translate-cloak timing

Instead of removing the cloak only when the instance of the directive has been created before the first translations have been loaded, this ensures the cloak will be removed at any time using the new `$translate.onReady()`.

Fixes #929
Fixes #1175

src/directive/translate-cloak.js

@@ -22,7 +22,7 @@ angular.module('pascalprecht.translate')
  */
 .directive('translateCloak', translateCloakDirective);
 
-function translateCloakDirective($rootScope, $translate) {
+function translateCloakDirective($translate) {
 
   'use strict';
 
@@ -33,11 +33,9 @@ function translateCloakDirective($rootScope, $translate) {
       },
       removeCloak = function () {
         tElement.removeClass($translate.cloakClassName());
-      },
-      removeListener = $rootScope.$on('$translateChangeEnd', function () {
+      };
+      $translate.onReady(function () {
         removeCloak();
-        removeListener();
-        removeListener = null;
       });
       applyCloak();
 

test/unit/directive/translate-cloak.spec.js

@@ -46,14 +46,14 @@ describe('pascalprecht.translate', function () {
       });
 
       describe('an element added after the first translation', function () {
-        it('should still have translate-cloak', function () {
+        it('should have not translate-cloak', function () {
           element = $compile('<div translate-cloak></div>')($rootScope);
           $rootScope.$digest();
           expect(element.hasClass('translate-cloak')).toBe(false);
           $timeout(function () {
             var element2 = $compile('<div translate-cloak></div>')($rootScope);
             $rootScope.$digest();
-            expect(element2.hasClass('translate-cloak')).toBe(true);
+            expect(element2.hasClass('translate-cloak')).toBe(false);
           }, 100);
           $timeout.flush();
         });