【问题标题】:I18n with Angular JS (jlg-i18n) - Date and currency filters aren't working ( changing $Locale Dynamically)I18n 与 Angular JS (jlg-i18n) - 日期和货币过滤器不起作用(动态更改 $Locale)
【发布时间】:2015-09-17 16:05:43
【问题描述】:

我正在尝试使用 jlg-i18n 到 i18n 我的代码。问题是字符串已翻译,但日期和货币未翻译!

{{date | date}} 和 {{price |货币}} 似乎有效。

它与默认语言环境保持一致(首先加载的语言环境)

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

这是Github上的模块

还有我的代码:

<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>

我的代码是一个非常简单的代码,所以我几乎可以确定问题不在于它 感谢您的帮助和建议!

我对这个问题很失望,因为在 i18n 的 Angular 模块中,这是最简单的一个!!

更新

我已经弄清楚出了什么问题,我没有在此处更新语言环境的目录

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

    }]);

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

更新 2

我已经弄清楚为什么 jlg-i18n 不适用于货币或数字过滤器!这不是模块的问题,而是角度本身的问题。发生的情况是货币和数字的函数是从第一个加载的语言环境中缓存的,所以当你更改语言环境时它不会生效。日期有效,因为此功能未存储在缓存中! 有一个关于 Angular js 开发的注释,用于在未来的版本中解决这个问题!我找到了一个用于动态更改语言环境的模块,但对我来说不是正确的解决方案。

建议的方法之一,我选择的方法是重写货币和数字的角度函数!

希望它可以帮助某人! :)

AngularJS github上问题问题的链接:https://github.com/angular/angular.js/issues/9159

【问题讨论】:

    标签: angularjs internationalization locale dynamically-generated


    【解决方案1】:

    解决方案

    我已经弄清楚为什么 JS-i18n 不适用于货币或数字过滤器!这不是模块的问题,而是角度本身的问题。发生的情况是货币和数字的函数是从加载的第一个语言环境缓存的,所以当你更改语言环境时它不会生效。日期有效,因为此功能未存储在缓存中!有一个关于 Angular js 开发的注释,用于在未来的版本中解决这个问题!我找到了一个用于动态更改语言环境的模块,它也解决了这个问题,但对我来说不是正确的解决方案。

    建议的方法之一,我选择的方法是重写货币和数字的角度函数!

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

    希望它可以帮助某人! :)

    如果有人想使用我的解决方案,我在 github 上有(这是一个非常简单的学校项目,所以很容易理解正在做什么): https://github.com/michellebionico/i18n-with-Angular-JS

    AngularJS github上问题问题的链接:https://github.com/angular/angular.js/issues/9159

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-11-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-13
      • 1970-01-01
      相关资源
      最近更新 更多