angularjs指令货币格式根据选择的翻译语言

时间:2016-11-13 22:41:08

标签: angularjs angularjs-directive locale angular-translate currency-formatting

我正在格式化货币格式的数字,小数点和逗号/点标记数千。

app.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });
            elem.bind('blur', function(event) {
                var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
            });
        }
    };
}]);

我的应用程序有两种语言界面,德语和英语,与货币相关的数字符号不同 如何考虑用户选择的语言,以便格式适合用户选择?

这是我的语言翻译代码:

app.config(['$translateProvider',
function ($translateProvider) {    
    $translateProvider.useStaticFilesLoader({
        prefix: 'assets/i18n/',
        suffix: '.json'
    });    
    $translateProvider.preferredLanguage('en');    
    $translateProvider.useLocalStorage();

}]);

主控制器:

$scope.language = {
    listIsOpen: false,
    available: {
        'en': 'English',
        'de_DE': 'Deutsch'
    },
    init: function () {
        var proposedLanguage = $translate.proposedLanguage() || $translate.use();
        var preferredLanguage = $translate.preferredLanguage();
        $scope.language.selected = $scope.language.available[(proposedLanguage || preferredLanguage)];
    },
    set: function (localeId, ev) {
        $translate.use(localeId);
        $scope.language.selected = $scope.language.available[localeId];
        $scope.language.listIsOpen = !$scope.language.listIsOpen;
    }
};

$rootScope.$on('$translateChangeSuccess', function () {
    var lang = $translate.use();
    $http.get('assets/i18n/'+lang+'.json').success(function(data) {
        $rootScope.i18nTranslationJSON = data;
        $rootScope.$emit('myTranslationsLoaded');
    });
});
$scope.language.init();

1 个答案:

答案 0 :(得分:0)

在尝试重新发明轮子之前,您是否考虑过本地$locale服务? 您可以使用原生过滤器来根据您要使用的locale格式化货币,日期和数字。

要在不重新加载页面的情况下动态更改语言,您可以使用angular-dynamic-locale模块。