AngularJS: intro.js - change language - options in the directive in one language

Question

I use intro.js in my angular application:

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

and everything was fine until yesterday ...

my problem:

when I decide (or skip) the tutorial:

and

after changing the language and restarting the tutorial:

and I see the same hints (in the same language as before), but this text changes:

what am I doing wrong?

I call intro.js like this:

<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 the whole angular directive 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 am I doing wrong? why don't my hints change my language?

plunker can be checked here:

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

what am i doing wrong with angular-translate?

Answer 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'
    }, [...]];
});