如何使用加载了 oclazyload 的外部模块加载 Angular translate？答案

【问题标题】：How to load Angular translate with external modules loaded with oclazyload?如何使用加载了 oclazyload 的外部模块加载 Angular translate？
【发布时间】：2015-12-17 15:47:44
【问题描述】：

我正在使用 oclazyload 来满足外部模块的需求，我需要翻译内容，所以我使用 angular-translate 但翻译不起作用，因为添加该部分的代码在控制器内是异步加载的。

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 和我使用的其他控制器的延迟加载（这工作正常）：

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

我需要在控制器本身之前加载这个addPart。

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

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

【问题讨论】：

在这里尝试解决方案，完美运行stackoverflow.com/questions/37247083/…

标签： javascript angularjs lazy-loading

【解决方案1】：

我解决了在主应用控制器中使用单击导航中的链接时调用的新函数：

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

【讨论】：