AngularJS：intro.js - 更改語種 - 在相同的指令語言選項

Question

我使用intro.js在我的角度應用：

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

，一切都OK，直到昨天...

我的問題：

當我解決（或跳過）教程：

和

後我改變語言，然後重新啓動教程：

，我看到同樣的提示（在像以前一樣的語言），但這種文字被改變：

我做錯了什麼？

我打電話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：

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