EzDevInfo.com

intro.js

A better way for new feature introduction and step-by-step users guide for your website and project. Intro.js | Better introductions for websites and features with a step-by-step guide for your projects. intro.js - better introductions for websites and features with a step-by-step guide for your projects.

Get it on Github
Language : Javascript

http://usablica.github.com/intro.js/

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

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:

enter image description here

and

enter image description here

after i change language and restart tutorial:

enter image description here

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

enter image description here

what i do wrong?

i call intro.js so:

<a rel='nofollow' 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?