2

Estoy trabajando con oclazyload para la carga por la demanda de módulos externos y tengo que traducir el contenido, por lo que estoy usando angular-translate pero la traducción no funciona porque el código que añade la parte está dentro del controlador que se carga de forma asincrónica.

angular
    .module('main')
    .controller('invoicesCtrl', invoicesCtrl);

function invoicesCtrl($scope, $translatePartialLoader, $translate) {

    $translatePartialLoader.addPart('invoices');
    $translate.refresh();
    ...

}

La aplicación principal carga las traducciones aquí:

(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');

    });

})();

Y para la carga asíncrona de invoicesCtrl y los otros controladores que uso (esta parte está funcionando bien):

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;
   }
}

Necesito cargar este addPart antes de que el propio controlador.

$translatePartialLoader.addPart('invoices');
$translate.refresh();

Tal vez una aproximación puede ser el uso de un evento, pero soy nuevo en javascript y no sé cómo ponerlo en práctica.

1 respuesta 1

0

Lo solucioné usando en el controlador de la aplicación principal una nueva función que se llama cuando el enlace de la navegación recibe un clic:

<li ng-class="active" ng-click="getModuleLang('invoices')">

Mi archivo main.js:

angular
    .module('main')
    .controller('appCtrl', appCtrl);

function appCtrl($scope, $translate, $translatePartialLoader) {

    // Secure translate module added to language lazy load
    $translatePartialLoader.addPart('secure');
    $translate.refresh();

    // Function that changes the language based on the headers language buttons
    $scope.changeLanguage = function (langKey) {
        $translate.use(langKey);
    };

    // Load the language modula based on the navigation element clicked
    $scope.getModuleLang = function(module){
        $translatePartialLoader.addPart(module);
        $translate.refresh();       
    }
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.