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

Question

我正在使用 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 的新手，我不知道如何实现它。

Answer 1

我解决了在主应用程序控制器中使用单击导航中的 link 时调用的新函数的问题：

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

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

How to load Angular translate with external modules loaded with oclazyload?

javascript

lazy-loading

angularjs