Javascript AngularJS:intro.js-更改语言-使用相同语言的选项

我在angular应用程序中使用intro.js：

一切都很好，直到昨天

我的问题是：

当我求解（或跳过）教程时：

及

更改语言并重新启动教程后：

我看到了相同的提示（与以前相同的语言），但这段文字发生了变化：

我做错了什么

我称之为intro.js，因此：

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

我做错了什么？为什么我的提示没有改变他们的语言

plunker您可以在这里查看：

---

angular translate

有什么不对？

您使用的是同步的

$translate.instant（

），这意味着您的

intro

属性在更改语言时永远不会自动更新

当语言更改时，您需要手动重新加载intro.js配置（步骤）。为此，您可以使用角度平移事件，如

$translateChangeSuccess

：

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

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();
                });
            }
        }
    };
}]);

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