How do I wait for the Angular module to load?
I am trying to use i18next ( https://github.com/archer96/ng-i18next ) in my Angular project but it seems to load too slowly. 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 need to add a timeout to make a difference. Is there a way to make sure i18next is ready when the controller is loaded?
UPDATE
I am trying to group workouts by type that translates using $ i18next. But that doesn't work because the view is "done" before the controller translates.
<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")},
];
+3
source to share
2 answers
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;
}
}
});
}]);
+1
source to share
You can also listen to the 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 will have to decide other race conditions at your own discretion.
0
source to share