I18n with Angular JS (jlg-i18n) - 日期和货币过滤器不起作用（动态更改 $Locale）

Question

我正在尝试使用 jlg-i18n 来国际化我的 code.The 问题是字符串已翻译但日期和货币没有！

{{date | date}} 和 {{price | currency}} 似乎有效。

它保持默认语言环境（最先加载的语言环境）

有什么想法吗？有人遇到过这个错误吗？

上的模块

还有我的代码：

<html ng-app="ShoppingList">
<head>
<meta charset="utf-8">
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/bootstrap.css">
<style>
    .jumbotron {
        width: 400px;
        text-align: center;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .table {
        margin-top: 20px;
    }
    .form-control {
        margin-bottom: 5px;
    }
    .selecionado {
        background-color: yellow;
    }
    .negrito {
        font-weight: bold;
    }
</style>
<script src="lib/angular/angular.js"></script>

<!-- Arquivo de localização referente ao país -->
<script id="locale" src="lib/angular/angular-locale_pt-br.js"></script>

<!--<script src="lib/angular/angular-locale_en-us.js"></script>-->

<!--<script src="lib/angular/angular-locale_fr-fr.js"></script>-->

<!--Caminho do módulo jlg-i18n-->
<script src="bower_components/jlg-i18n/jlg-i18n.min.js"></script>

<script src="bower_components/jquery/dist/jquery.min.js"></script>





<script>
    //Adiciona o módulo ['jlgI18n'] ao módulo Shopping list
    var app = angular.module("ShoppingList",['jlgI18n']);

    //É necessário adicionar ao controlador os serviços '$locale', 'jlgI18nService',
    app.controller("shoppingListCtrl", ['$scope', '$locale', 'jlgI18nService',
        function ($scope, $locale, i18nService) {

            $scope.date = new Date();
        $scope.app = "Shopping list";
        $scope.list = [
            {name: "Chocolate", price: 4.50, date: new Date()},
            {name: "Cookies", price: 3.00, date: new Date()},
            {name: "Potatoes", price: 5.00, date: new Date()}
        ];

        $scope.adicionarContato = function (contato) {
            $scope.contatos.push(angular.copy(contato));
            delete $scope.contato;
        };
        $scope.apagarContatos = function (contatos) {
            $scope.contatos = contatos.filter(function (contato) {
                if (!contato.selecionado) return contato;
            });
        };
        $scope.isContatoSelecionado = function (contatos) {
            return contatos.some(function (contato) {
                return contato.selecionado;
            });
        };

        //Variável que define a localização
        $scope.locale = $locale;

        //Função que altera a localização de acordo com o usuário
        $scope.changeLocale = i18nService.changeLocale;

    }]);

    //Configura o módulo
    app.config(['jlgI18nServiceProvider', function(jlgI18nServiceProvider) {
        jlgI18nServiceProvider.localeDir('../locale');

    }]);


</script>

<div class="jumbotron">

    <h2>{{app | i18n}}</h2>

    <table ng-show="list.length > 0" class="table">
        <tr>
            <th>{{'Name' | i18n}}</th>
            <th>{{'Price' | i18n}}</th>
            <th>{{'Date' | i18n}}</th>
        </tr>

        <tr ng-repeat="product in list">
            <td>{{product.name | i18n}}</td>
            <td>{{product.price | currency}}</td>
            <td>{{product.date | date }} </td>
        </tr>


        {{date | date:'fullDate'}}

    <p>{{'Locale' | i18n}}: {{locale.id}}</p>
    <div>

        <label ng-repeat="id in ['en-us', 'pt-br', 'fr-fr']">
                <input name="locale_id" type="radio"
                ng-click="changeLocale(id)"
                ng-checked="{{locale.id == id}}"/>
                {{id}}
        </label>
    </div>




</div>

我的代码是一段非常简单的代码，所以我几乎可以肯定问题出在它身上感谢您的帮助和建议！

我对这个问题很失望，因为从 angular 的 i18n 模块来看，这是最简单的一个！！

更新

我已经知道出了什么问题，我没有在这里更新语言环境的目录

    app.config(['jlgI18nServiceProvider', function(jlgI18nServiceProvider) {
        jlgI18nServiceProvider.localeDir('../locale');

    }]);

但奇怪的是，它只解决了日期问题，货币仍然不起作用:/

更新 2

我弄明白了为什么 jlg-i18n 不适用于货币或数字过滤器！这不是模块的问题，而是 angular 本身的问题。发生的事情是货币和数字的功能是从加载的第一个区域设置缓存的，因此当您更改区域设置时它不会生效。日期有效，因为此功能未存储在缓存中！ angular js development 中有注释，用于在未来的版本中修复此问题！我找到了一个动态更改语言环境的模块，但这对我来说不是正确的解决方案。

建议的方法之一，我选择的方法是重写货币和数字的 angular 函数！

希望对大家有所帮助！ :)

Link到AngularJS上的问题github的问题：https://github.com/angular/angular.js/issues/9159

Answer 1

解决方案

我明白了为什么 JS-i18n 不适用于货币或数字过滤器！这不是模块的问题，而是 angular 本身的问题。发生的事情是货币和数字的功能是从加载的第一个区域设置缓存的，因此当您更改区域设置时它不会生效。日期有效，因为此功能未存储在缓存中！ angular js development 上有注释，用于在未来的版本中修复此问题！我找到了一个用于动态更改语言环境的模块，它也解决了这个问题，但对我来说不是正确的解决方案。

建议的方法之一，我选择的方法是重写货币和数字的 angular 函数！

我知道这是一个临时修复，而 Angular 的团队没有解决这个问题，你也应该

希望对大家有所帮助！ :)

如果有人想使用我的解决方案，我可以在 github 上找到它（这对学校来说是一个非常简单的项目，所以很容易理解正在做什么）： https://github.com/michellebionico/i18n-with-Angular-JS

Link关于AngularJS github问题的问题：https://github.com/angular/angular.js/issues/9159

I18n with Angular JS (jlg-i18n) - 日期和货币过滤器不起作用（动态更改 $Locale）

I18n with Angular JS (jlg-i18n) - Date and currency filters aren't working ( changing $Locale Dynamically)

angularjs

internationalization

locale

dynamically-generated

更新

更新 2

解决方案