简体   繁体   English

如何等待Angular模块加载?

[英]How to wait for Angular module to load?

I'm trying to use i18next ( https://github.com/archer96/ng-i18next ) in my Angular project, but it seems to be loading too slow. 我正在尝试在我的Angular项目中使用i18next( https://github.com/archer96/ng-i18next ),但它似乎加载得太慢了。 This is my setup: 这是我的设置:

angular.module('jm.i18next').config(['$i18nextProvider', function ($i18nextProvider) {
    $i18nextProvider.options = {
        lng: 'en',
        fallbackLng: 'en',
        preload: ['en'],
        supportedLngs: ['en'],
        resGetPath: '../locales/__lng__.json',
        useCookie: false,
        useLocalStorage: false,
        defaultLoadingValue: ''
    };
}]);

angular.module('myApp', ['jm.i18next']).controller('MainCtrl', ['$scope', '$i18next', function ($scope, $i18next) {
console.log($i18next("key"));

setTimeout(function() {
    console.log($i18next("key"));
  }, 1000);
}]);

I have to add a timeout to have a value. 我必须添加超时才能获得值。 Is there a way to make sure i18next is ready when the controller is loaded? 有没有办法确保在加载控制器时i18next准备就绪?


UPDATE UPDATE

I'm trying to group workouts by type, which is translated using $i18next. 我正在尝试按类型对锻炼进行分组,使用$ i18next进行翻译。 But this doesnt work, since the view is "ready" before the controller has done the translation. 但这不起作用,因为在控制器完成翻译之前视图已“准备好”。

<select ng-model="workout" ng-options="workout as workout.name group by workout.type for workout in workouts | orderBy: ['type', 'name']"></select>

$scope.workouts = [
    {id: 1, name: 'Workout 1', type: $i18next("type1")},
    {id: 25, name: 'Workout 2', type: $i18next("type2")},
  ];

This solved my problem. 这解决了我的问题。

angular.module('myApp', ['ngRoute', 'jm.i18next']).
        config(['$routeProvider', function ($routeProvider) {
            $routeProvider.
                when('/route1', {
                    title: 'Route 1',
                    templateUrl: '../views/route1.html',
                    controller: 'Route1Ctrl',
                    resolve: {
                      i18next: function ($i18next) {
                        return $i18next;
                      }
                    }
                });
    }]);

You could also listen to the i18nextLanguageChange event: 您还可以收听i18nextLanguageChange事件:

$scope.$on('i18nextLanguageChange', function () {
  $scope.workouts = [
    {id: 1, name: 'Workout 1', type: $i18next("type1")},
    {id: 25, name: 'Workout 2', type: $i18next("type2")},
  ];
});

You'll have to tackle other race conditions on your own that way. 你必须以自己的方式解决其他竞争条件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM