I am working with oclazyload for load on demand of external modules and I have to translate the content, so I am using it angular-translate
but the translation does not work because the code that adds the part is inside the controller that is loaded asynchronously.
angular
.module('main')
.controller('invoicesCtrl', invoicesCtrl);
function invoicesCtrl($scope, $translatePartialLoader, $translate) {
$translatePartialLoader.addPart('invoices');
$translate.refresh();
...
}
The main app loads the translations here:
(function () {
angular.module('main', [
'ui.router', // Angular flexible routing
'oc.lazyLoad',
'ngResource',
'pascalprecht.translate' // Angular-translate
]);
angular.module('main').config(function ($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: './i18n/{part}/{lang}.json'
});
$translateProvider.preferredLanguage('en_US');
$translateProvider.forceAsyncReload(true);
$translatePartialLoaderProvider.addPart('secure');
// Enable escaping of HTML
$translateProvider.useSanitizeValueStrategy('escape');
});
})();
And for the asynchronous loading of invoicesCtrl
and the other controllers I use (this part is working fine):
function configState($stateProvider, $urlRouterProvider, $compileProvider) {
function resolveUrl(path){
var loadUrl = { // Any property in resolve should return a promise and is executed before the view is loaded
loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load(path);
}]
};
return loadUrl;
}
}
I need to load this addPart
before the controller itself.
$translatePartialLoader.addPart('invoices');
$translate.refresh();
Maybe an approximation can be the use of an event, but I'm new to javascript and don't know how to implement it.
I fixed it by using in the main app controller a new function that is called when the navigation link is clicked:
my file
main.js
: