I18n с Angular JS (jlg-i18n) - фильтры даты и валюты не работают (динамическое изменение локали $)

Question

I18n с Angular JS (jlg-i18n) - фильтры даты и валюты не работают (динамическое изменение локали $)

0

Я пытаюсь использовать jlg-i18n для i18n моего кода. Дело в том, что строки переведены, но даты и валюта нет!

Ни {{date | date}} валюта}}, похоже, работают.

Он остается как локаль по умолчанию (тот, который был загружен первым)

Есть идеи? Кто-нибудь испытывает эту ошибку?

Вот модуль на 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>

мой код довольно простой код, поэтому я почти уверен, что проблема не в том, что я ценю любую помощь и sugestion!

Я очень разочарован этой проблемой, потому что из модулей i18n для углового это был самый простой!

Обновить

Я уже выяснял, что случилось, я не обновлял каталог локали ЗДЕСЬ

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

    }]);

Но, как ни странно, он решил проблему даты, валюта все еще не работает:/

Обновления 2

Я выяснил, почему jlg-i18n не работает для валютных или числовых фильтров! Это не проблема с модулем, а с самой угловой. Случается, что функции для валюты и числа кэшируются из первой загруженной локали, поэтому, когда вы меняете язык, он не действует. Дата работает, потому что эта функция не хранится в кеше! Есть заметка о разработке углового js для исправления этого в будущих версиях! Я нашел модуль для динамического изменения языка, но для меня это не правильное решение.

Один из предложенных подходов, и тот, который я выбрал, - это переписать угловые функции для валюты и числа!

Надеюсь, это поможет кому-то! :)

Ссылка на вопрос о проблеме на AngularJS github: https://github.com/angular/angular.js/issues/9159

Michelle Colin 30 июнь 2015, в 20:47

Источник

Теги:

angularjs

locale

internationalization

dynamically-generated

1 ответ

Ещё вопросы

Michelle Colin · Accepted Answer · 2015-06-30T18-39-00.000Z

Решение

Я выяснил, почему JS-i18n не работает для валютных или числовых фильтров! Это не проблема с модулем, а с самой угловой. Случается, что функции для валюты и числа кэшируются из первой загруженной локали, поэтому, когда вы меняете язык, он не действует. Дата работает, потому что эта функция не хранится в кеше! Есть заметка о разработке углового js для исправления этого в будущих версиях! Я нашел модуль для динамического изменения языка, который также устраняет эту проблему, но для меня это не подходит.

Один из предложенных подходов, и тот, который я выбрал, - это переписать угловые функции для валюты и числа!

Я понимаю, что это временное решение, в то время как проблема не решена Angular team, и вы тоже должны

Надеюсь, это поможет кому-то! :)

Если кто-то хочет использовать мое решение, у меня есть это на github (это довольно простой проект для школы, поэтому очень легко понять, что делается): https://github.com/michellebionico/i18n-with-Angular- JS

Ссылка на вопрос о проблеме на AngularJS github: https://github.com/angular/angular.js/issues/9159