angularjs – 如何在使用ui-router解析显示任何UI之前加载Angular-translate

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在使用ui-router解析显示任何UI之前加载Angular-translate前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用角度翻译为i18n.我想将$translatePartialLoader服务用于模块化语言密钥作为延迟加载.另外我想为此使用ui-router resolve选项.

现在怎么做?可以为我添加代码示例吗?

谢谢

我找到解决方案并解决我的问题.

在配置中:

  1. $translatePartialLoaderProvider.addPart('index');
  2. $translateProvider
  3. .useSanitizeValueStrategy(null)
  4. .fallbackLanguage('en-us')
  5. .registerAvailableLanguageKeys(['en-us','pt-br'],{
  6. 'en_*': 'en-us','pt_*': 'pt-br'
  7. })
  8. .useLoader('$translatePartialLoader',{
  9. urlTemplate: '{part}/locale_{lang}.json'
  10. })
  11. .useLoaderCache(true)
  12. .useCookieStorage()
  13. .determinePreferredLanguage();

在ui-router for index中:

  1. .state('index',{
  2. url: '/index',templateUrl: 'index.html',controller:'IndexCtrl',resolve: {
  3. trans:['RequireTranslations',function (RequireTranslations) {
  4. RequireTranslations('index');
  5. }],dep: ['trans','$ocLazyLoad',function(trans,$ocLazyLoad){
  6. return $ocLazyLoad.load(['plugin']).then(
  7. function(){
  8. return $ocLazyLoad.load(['IndexCtrl.js']);
  9. }
  10. );
  11. }]
  12. }
  13. })
  14. .state('index.users',{
  15. url: "/users",templateUrl: "users.html",controller:'UserListCtrl',function (RequireTranslations) {
  16. RequireTranslations('modules/user');
  17. }],$ocLazyLoad){
  18. return $ocLazyLoad.load(['UserListCtrl.js'])
  19. }]
  20.  
  21. }
  22. })

并在运行中:

  1. app.run(function($rootScope,$translate) {
  2.  
  3. // translate refresh is necessary to load translate table
  4. $rootScope.$on('$translatePartialLoaderStructureChanged',function () {
  5. $translate.refresh();
  6. });
  7.  
  8. $rootScope.$on('$translateChangeEnd',function() {
  9. // get current language
  10. $rootScope.currentLanguage = $translate.use();
  11. });
  12. })

在RequireTranslations工厂中:

  1. app.factory('RequireTranslations',function($translatePartialLoader,$translate,$rootScope) {
  2. return function() {
  3. angular.forEach(arguments,function(translationKey) {
  4. $translatePartialLoader.addPart(translationKey);
  5. });
  6. return $translate.refresh().then(
  7. function(){
  8. return $translate.use($rootScope.currentLanguage);
  9. }
  10. );
  11. };
  12. });

请注意你应该在所有控制器中添加$translatePartialLoader和trans作为参数,如下所示:

  1. app.controller('UserListCtrl',function($scope,...,$translatePartialLoader,trans){

猜你在找的Angularjs相关文章