AngularJS: выполнить функцию директивы при загрузке страницы

Это моя директива, которая обрабатывает всплывающие окна. Я использую angular-translate для перевода текста в разные языки:

angular.module('c2gyoApp')
  .directive('tariffPopover', [
    '$translate', 
    '$rootScope', 
    function ($translate, $rootScope) {
return {
  restrict: 'A',
  transclude: true,
  scope: {
    translateText: '@tariffPopover'
  },
  template:
    '<span ng-transclude></span>' +
    '&nbsp;' +
    '<span popover-placement="right" ' +
    '      uib-popover-html="text" ' +
    '      popover-trigger="mouseenter" ' +
    '      class="fa fa-info-circle">' +
    '</span>',
  controller: function ($scope) {
    $translate($scope.translateText).then(function (translatedText) {
      $scope.text = translatedText;
    });

    $rootScope.$on('$translateChangeSuccess', function () {
      $translate($scope.translateText).then(function (translatedText) {
        $scope.text = translatedText;
      });
    });

  }
};
}]);

Перевод выполняется, когда язык меняется с помощью $rootScope.$on('$translateChangeSuccess'). Однако это не выполняется при загрузке страницы, поэтому я добавил строки для повторного перевода текста в контроллере:

  controller: function ($scope) {
    $translate($scope.translateText).then(function (translatedText) {
      $scope.text = translatedText;
    });

    $rootScope.$on('$translateChangeSuccess', function () {
      $translate($scope.translateText).then(function (translatedText) {
        $scope.text = translatedText;
      });
    });

Есть ли способ выполнить перевод при загрузке страницы без дублирования кода?


person mles    schedule 30.12.2015    source источник


Ответы (2)


Если все, что вы хотите сделать, это избежать копирования-вставки, то я думаю, что лучше использовать объектно-ориентированную практику, чтобы обернуть дублированный код в именованную функцию, а не использовать анонимную функцию. Таким образом, его можно использовать повторно.

controller: function ($scope) {

  var translate = function(){
     $translate($scope.translateText).then(function (translatedText) {
         $scope.text = translatedText;
    });
  }

  $rootScope.$on('$translateChangeSuccess', translate);

  //execute the translation when the controller loads
  translate();
}
person Andrew Tomlinson    schedule 30.12.2015

Попробуйте заменить

$translateChangeSuccess с

$locationChangeSuccess, чтобы он действовал при изменении страницы/местоположения.

Также вы можете использовать $viewContentLoaded, если хотите получить его после загрузки содержимого страницы.

Надеюсь, это будет полезно..!

person Kunal Kakkad    schedule 30.12.2015
comment
не могли бы вы показать мне ошибку, которую вы получаете в консоли? - person Kunal Kakkad; 30.12.2015
comment
Здесь ничего нет. Кажется, $locationChangeSuccess никогда не увольняли. - person mles; 30.12.2015
comment
не могли бы вы добавить скрипку для того же? так что я могу взглянуть на него. - person Kunal Kakkad; 30.12.2015