text: angular.module('pascalprecht.translate')
  /**
   * @ngdoc directive
   * @name pascalprecht.translate.directive:translateCloak
   * @requires $rootScope
   * @requires $translate
   * @restrict A
   *
   * $description
   * Adds a `translate-cloak` class name to the given element where this directive
   * is applied initially and removes it, once a loader has finished loading.
   *
   * This directive can be used to prevent initial flickering when loading translation
   * data asynchronously.
   *
   * The class name is defined in
   * {@link pascalprecht.translate.$translateProvider#cloakClassName $translate.cloakClassName()}.
   *
   * @param {string=} translate-cloak If a translationId is provided, it will be used for showing
   *                                  or hiding the cloak. Basically it relies on the translation
   *                                  resolve.
   */
  .directive('translateCloak', translateCloakDirective);
  
  function translateCloakDirective($rootScope, $translate) {
  
    'use strict';
  
    return {
      compile: function (tElement) {
        var applyCloak = function () {
          tElement.addClass($translate.cloakClassName());
        },
        removeCloak = function () {
          tElement.removeClass($translate.cloakClassName());
        },
        removeListener = $rootScope.$on('$translateChangeEnd', function () {
          removeCloak();
          removeListener();
          removeListener = null;
        });
        applyCloak();
  
        return function linkFn(scope, iElement, iAttr) {
          // Register a watcher for the defined translation allowing a fine tuned cloak
          if (iAttr.translateCloak && iAttr.translateCloak.length) {
            iAttr.$observe('translateCloak', function (translationId) {
              $translate(translationId).then(removeCloak, applyCloak);
            });
          }
        };
      }
    };
  }
  
  translateCloakDirective.displayName = 'translateCloakDirective';
  