AngularJS: intro.js — изменить язык — параметры в директиве на том же языке

Я использую intro.js в своем угловом приложении:

http://code.mendhak.com/angular-intro.js/example/index.html

и все было ок, до вчерашнего дня...

моя проблема:

когда я решаю (или пропускаю) учебник:

введите здесь описание изображения

а также

введите здесь описание изображения

после того, как я изменю язык и перезапущу учебник:

введите здесь описание изображения

и я вижу те же подсказки (на том же языке, что и раньше), но этот текст изменен:

введите здесь описание изображения

что я делаю не так?

я называю intro.js так:

<a href="javascript:void(0)" ng-click="CallMe(1)">Start It!</a>

и варианты:

$scope.IntroOptions = {
    steps: [{
      element: '.el1',
      intro: $translate.instant('text1'),
      position: 'bottom'
    }, {
      element: '.el2',
      intro: $translate.instant('text2'),
      position: 'bottom'
    }],
    showStepNumbers: false,
    showProgress: false,
    exitOnOverlayClick: false,
    keyboardNavigation: false,
    exitOnEsc: false,
    prevLabel: '',
    skipLabel: '<strong>skip</strong>',
    doneLabel: '<strong>skip</strong>'
  };

и вся директива angularjs для intro.js:

var ngIntroDirective = angular.module('angular-intro', []);


ngIntroDirective.directive('ngIntroOptions', ['$timeout', function ($timeout) {

    return {
        restrict: 'A',
        scope: {
            ngIntroMethod: "=",
            ngIntroExitMethod: "=?",
            ngIntroOptions: '=',
            ngIntroOncomplete: '=',
            ngIntroOnexit: '=',
            ngIntroOnchange: '=',
            ngIntroOnbeforechange: '=',
            ngIntroOnafterchange: '=',
            ngIntroAutostart: '&',
            ngIntroAutorefresh: '='
        },
        link: function(scope, element, attrs) {

            var intro;

            scope.ngIntroMethod = function(step) {


                var navigationWatch = scope.$on('$locationChangeStart', function(){
                  intro.exit();
                });

                if (typeof(step) === 'string') {
                    intro = introJs(step);

                } else {
                    intro = introJs();
                }

                intro.setOptions(scope.ngIntroOptions);

                if (scope.ngIntroAutorefresh) {
                  scope.$watch(function(){
                    intro.refresh();
                  });
                }

                if (scope.ngIntroOncomplete) {
                    intro.oncomplete(function() {
                        scope.ngIntroOncomplete.call(this, scope);
                        $timeout(function() {scope.$digest()});
                        navigationWatch();
                    });
                }

                if (scope.ngIntroOnexit) {
                    intro.onexit(function() {
                        scope.ngIntroOnexit.call(this, scope);
                        $timeout(function() {scope.$digest()});
                        navigationWatch();
                    });
                }

                if (scope.ngIntroOnchange) {
                    intro.onchange(function(targetElement){
                        scope.ngIntroOnchange.call(this, targetElement, scope);
                        $timeout(function() {scope.$digest()});
                    });
                }

                if (scope.ngIntroOnbeforechange) {
                    intro.onbeforechange(function(targetElement) {
                        scope.ngIntroOnbeforechange.call(this, targetElement, scope);
                        $timeout(function() {scope.$digest()});
                    });
                }

                if (scope.ngIntroOnafterchange) {
                    intro.onafterchange(function(targetElement){
                        scope.ngIntroOnafterchange.call(this, targetElement, scope);
                        $timeout(function() {scope.$digest()});
                    });
                }

                if (typeof(step) === 'number') {
                    intro.goToStep(step).start();
                } else {
                    intro.start();
                }
            };

            scope.ngIntroExitMethod = function (callback) {
                intro.exit(); //TODO check callBack
            };

            if (scope.ngIntroAutostart()) {
                $timeout(function() {
                    scope.ngIntroMethod();
                });
            }
        }
    };
}]);

что я делаю не так? почему мои подсказки не меняют свой язык?

plunker вы можете проверить здесь:

http://plnkr.co/edit/RsJ29a49soZ4q33gxQhk?p=preview

что я делаю не так с angular-translate?


person brabertaser19    schedule 24.06.2015    source источник


Ответы (1)


Вы используете синхронный $translate.instant(), что означает, что ваше свойство intro никогда не будет обновляться при смене языка.

Вам нужно вручную перезагрузить конфигурацию intro.js (ваши шаги) при смене языка. Для этого вы можете использовать события angular-translate, такие как $translateChangeSuccess:

$rootScope.$on('$translateChangeSuccess', function() {
    // updating steps config with $translate.instant() function
    $scope.IntroOptions.steps = [{
      element: '.el1',
      intro: $translate.instant('text1'),
      position: 'bottom'
    }, [...]];
});
person Jscti    schedule 08.07.2015