angular.js - 通过语言动态设置 templateUrl (app.config stateprovider)答案

【问题标题】：angular.js - set templateUrl dynamically by language (app.config stateprovider)angular.js - 通过语言动态设置 templateUrl (app.config stateprovider)
【发布时间】：2015-04-25 06:36:31
【问题描述】：

我正在使用 Ionic 框架开发一个移动应用程序，但在处理帮助页面的多语言功能时遇到了一个大问题。

我有 2 种语言 (en + de)，我想根据语言加载 help_en.html 或 help_de.html。

我在主控制器中设置了默认语言和 changeLanguage 函数，它将在 $cookies.language 中设置语言并且它正在工作；

1.查看：

    <a ng-href="#/help" >

2.MainCtrl - 更改语言功能：

    $scope.changeLanguage = function(lang) {
      $scope.translation=translationService.getTranslation($scope, lang);
      $cookies.lang=lang;
    };

3.app.js 的配置看起来像这样：

    var myApp = angular.module('MyPetApp', ['ionic', 'config', 'MyApp.controllers', 'ngCordova', 'ngResource', 'ngCookies']);

  myApp.config(function($stateProvider, $urlRouterProvider) {
    var $cookies;
    angular.injector(['ngCookies']).invoke(function(_$cookies_) {
      $cookies = _$cookies_;
    });
    if ($cookies.language==undefined){
      $cookies.language = 'en'
    }

    $stateProvider
      .state('default', {
        url: "/",
        templateUrl: "templates/default.html"
     })

    .state('help', {
        url: '/help', 
        templateUrl: function (){
            return 'templates/help_'+$cookies.lang+'.html'
        }
    })
      $urlRouterProvider.otherwise('/');
  });

这在 chrome 中工作，但在移动设备上将一直使用“en”语言，即使我将值从 $cookies.language 更改为“de”。

我能做些什么来完成这项工作？有什么想法吗？我真的很感谢任何帮助

谢谢

【问题讨论】：

任何其他简单有效的方法都会很棒
我认为为 aboutUs-en 和 de 创建 2 个状态不是一个好的解决方案 :)
你为什么使用cookies而不是本地存储？
我正在使用这个例子blog.novanet.no/creating-multilingual-support-using-angularjs ...如果可以的话，我可以更改为 localStorage 但只是在这里（动态 templateUrl）我有这个问题，因为在其他页面上 cookie 工作正常

标签： android angularjs angular-ui-router ionic-framework

【解决方案1】：

关于 ionic & cordova 应用程序中的 cookie 问题。解决方案是使用 localStorage。看看this question

关于i18n我建议你使用angular-translate。我已经在适用于 android 和 ios 的 ionic 应用程序中使用过。如果您需要翻译应用程序的所有字符串和小文本，这非常有用。

可能我在帮助页面中遇到了同样的问题，因为我有很多文本（一些段落），所以我更喜欢使用纯 html 来处理所有文本，并使用简单的 ng-if 仅显示当前语言：

<ion-content class="has-header">
    <div class="list padding card" ng-if="settings.languageId == 'en'">
      ...
      English text here
      ...
    </div>
    <div class="list padding card" ng-if="settings.languageId == 'pt'">
      ...
      Portuguese text here
      ...
    </div>
</ion-content>

【讨论】：