javascript - 如何使用 oclazyload 加载的外部模块加载 Angular 翻译？

Question

我正在使用 oclazyload 根据外部模块的需求进行加载，并且我需要翻译内容，因此我使用 angular-translate 但翻译不起作用，因为代码添加该部分位于异步加载的 Controller 内。

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

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

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

}

主应用程序在此处加载翻译:

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

    });

})();

对于 invoicesCtrl 和我使用的其他 Controller 的延迟加载(这工作正常):

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

我需要在 Controller 本身之前加载此addPart。

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

也许可以使用事件来近似，但我是 JavaScript 新手，我不知道如何实现它。

Answer 1

我解决了在主应用程序 Controller 中使用单击导航中的链接时调用的新函数的问题:

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

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