javascript - AngularJS:intro.js - 更改语言 - 指令相同语言的选项

Question

我在我的 Angular 应用程序中使用了 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>'
  };

和 intro.js 的整个 angularjs 指令:

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 做错了什么？

Answer 1

您正在使用同步 $translate.instant()，这意味着您的 intro 属性在更改语言时永远不会自行更新。

当语言改变时，您需要手动重新加载 intro.js 配置(您的步骤)。为此，您可以使用像 $translateChangeSuccess 这样的 Angular 转换事件:

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