在Angular应用程序中为i18n注入脚本

Question

I would like to use i18n and i10n in my Angular app. 我想在我的Angular应用程序中使用i18n和i10n。 If I understood correctly I can inject a script into my index.html and the changes regarding the language will change on the fly. 如果我理解正确，我可以在我的index.html注入一个脚本，并且有关语言的更改会随时更改。 I tested it and it works when I added manually the script and refresh the page. 我测试了它，当我手动添加脚本并刷新页面时，它可以工作。

Unfortunately, I am trying to inject the script for the right language on the fly. 不幸的是，我正在尝试为正确的语言注入脚本。 I created a button and I want to add Portuguese language script on the click button. 我创建了一个按钮，我想在单击按钮上添加葡萄牙语脚本。

app.controller('appController', ['$scope', '$route', 'UserTopBarWidget', 
                        function($scope, $route, UserTopBarWidgetService){

        $scope.topBarWidget = UserTopBarWidget;
        $scope.topBarWidget.loadTopBarWidget();

    }
}]);

In this file I just load the service I created called UserTopBarWidget . 在这个文件中，我只加载我创建的名为UserTopBarWidget的服务。 The UserTopBarWidget : UserTopBarWidget ：

app.service('UserTopBarWidgetService', function($http){
    this.loadTopBarWidget = function(){
    //loading something
};


this.loadPortugueseLanguage = function(){
    var locale = "pt-pt";
    $.getScript("https://code.angularjs.org/1.2.16/i18n/angular-locale_" + locale + ".js");
}
});

I have a page html called index.html and inject to it my html files: 我有一个名为index.html的页面html并向其注入我的html文件：

index.html: index.html的：

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/style.css" />
    <title></title>
</head>

<body ng-controller="AppCtrl">
    <div id="container" ng-view></div>
</body>

</html>

The injected html: 注入的html：

<button type="button" id="searchButton" class="btn btn-default" ng-click="topBarWidget.loadPortugueseLanguage()">Portugese</button>

<h2>{{date | date: 'fullDate' }}</h2>
<h2>{{money | currency}}</h2>

The answer I get : 我得到的答案：

Tuesday, June 10, 2014
$500.00

I would like to see it in Portuguese. 我想用葡萄牙语看。 What am I doing wrong? 我究竟做错了什么？

Answer 1

Question 题

There is no way in pure angular to dynamically change locale so far, you can only do it on bootstrap level but there is a few projects that implement this functionality. 到目前为止，在纯角度中无法动态更改区域设置，您只能在引导级别上执行此操作，但有一些项目可以实现此功能。 This one is particularly good IMHO 这一个特别好恕我直言

https://github.com/lgalfaso/angular-dynamic-locale https://github.com/lgalfaso/angular-dynamic-locale

Answer 2

There are two possible solutions to your problem really. 您的问题确实有两种可能的解决方案。

One is to use angular-dynamic-locale as @maurycy already explained. 一种是使用角度动态区域设置，因为@maurycy已经解释过了。 It's not the cleanest solution I can think of, but it's better than nothing. 这不是我能想到的最干净的解决方案，但总比没有好。

The other possible solution is to create your own using other specialized i18n library like iLib for example. 另一种可能的解决方案是使用其他专用的i18n库（例如iLib）创建自己的解决方案。
Why would you ever want to do that? 你为什么要这样做？
Well, built-in AngularJS i18n routines does not allow for handling other calendars, time zones and formatting percents. 好吧，内置的AngularJS i18n例程不允许处理其他日历，时区和格式百分比。 These are serious drawbacks. 这些是严重的缺点。 The fact, that you cannot override a Formatting Locale based on user profile (or you can, but forgot about web site caching) is another. 事实上，您不能基于用户配置文件覆盖格式化区域设置（或者您可以，但忘记了网站缓存）是另一个。

I recommend using custom iLib-based solution (I used to recommend Globalize but after recent changes it seems a bit useless) combined with angular-translate for User Interface translation and built-in angular-locale for handling plural forms (at the time of writing angular-translate does not handle it particularly well). 我建议使用基于ILIB定制的解决方案（我曾经建议Globalize的，但最近发生的变化后，似乎有点没用的）联合角转换为用户界面翻译和内置角区域用于处理复数形式（在写作的时候angular-translate不能很好地处理它）。

在Angular应用程序中为i18n注入脚本

问题描述

2 个解决方案

解决方案1
2 2014-06-10 11:32:03

解决方案2
1 2014-06-11 17:53:08

在Angular应用程序中为i18n注入脚本

问题描述

2 个解决方案

解决方案1 2 2014-06-10 11:32:03

解决方案2 1 2014-06-11 17:53:08

解决方案1
2 2014-06-10 11:32:03

解决方案2
1 2014-06-11 17:53:08