AngularJS: intro.js - change language - options in directive same language

Question

I'm using intro.js in my angular app:

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

and all was ok, untill yesterday...

my problem:

when i solve (or skip) tutorial:

and

after i change language and restart tutorial:

and i see same hints (in same language as before), but this text is changed:

what i do wrong?

i call intro.js so:

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

and options:

$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>'
  };

and whole angularjs directive of 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();
                });
            }
        }
    };
}]);

what i do wrong? why my hints are not changing their language?

plunker you could check here:

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

what i do wrong with angular-translate?

Answer 1

You're using the synchronous $translate.instant() which means that your intro property will never update itself when changing language.

You need to manually reload the intro.js configuration (your steps) when the language change. For that you can use angular-translate events like $translateChangeSuccess:

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