AngularJS通过操作$ locale来更改货币显示

Question

所以我现在已经在这个问题上挣扎了一段时间，但我找不到答案。

基本上我是这样的：

const formattedCurrency = $filter('currency')(input);

这会返回类似$0.00的内容（$似乎是默认的角度修饰CURRENCY_SYM:"$"）

我想要实现的目标是不是$0.00而是动态货币，例如€0.00或£0.00。

因此，我们假设我有一个带有此文本的html页面：

我有$ 0.00

如果我这样做：

this.$locale.NUMBER_FORMATS.CURRENCY_SYM = '€';

我的页面会立即变为：

我有€0.00

这很好，但问题是我从承诺中得到货币符号，如下：

this.getUserCurrency(this.id).then((currency) => {
    $locale.NUMBER_FORMATS.CURRENCY_SYM = currency; // this does not work
});

问题在于上述内容无效，即使我的$ locale已更改，也无法更改我的HTML页面。

我现在调查后得出的结论是：

如果我更改$ locale货币，它会自动更改我的所有货币，但是如果我在异步函数（promise）中执行此操作，我的语言环境将会改变但不再影响DOM

解决这个问题的方法是什么？

Answer 1

AngularJS组件中的

$filter＆amp; $locale不是摘要周期的一部分。这样，您就无法通过更改$scope配置对象来触发自动$locale更新。在我看来，这是不使用$locale作为摘要周期的一部分的最好方法（因为你不能这样做）。

您应该将货币配置保存在全局可用变量或工厂中（这是摘要周期的一部分）。您可以使用$rootScope以良好的方式使您的E2E绑定工作。同时在$locale.NUMBER_FORMATS.CURRENCY_SYM中设置您的货币，以便在其他代码部分中继续使用此配置。

查看：

<div ng-controller="MyCtrl">
   {{ value | currency: $root.currencySymbol }}
</div> 

AngularJS应用程序：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope, $filter, $locale, $http, $timeout) {

   $scope.value = 0.00;
   $rootScope.currencySymbol = $locale.NUMBER_FORMATS.CURRENCY_SYM;

   $http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
      $rootScope.currencySymbol = '€';
      $locale.NUMBER_FORMATS.CURRENCY_SYM = '€';
   });
});

<强>＆GT;＆GT; Demo fiddle

使用工厂的方法相同：

视图

<div ng-controller="MyCtrl">
   {{ value | currency: $root.currencyHandler.symbol }}
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function (
  $scope, 
  $rootScope, 
  $filter, 
  $locale, 
  $http, 
  $timeout,
  currencyHandler
  ) {

   $scope.value = 0.00;
   $rootScope.currencyHandler = currencyHandler;

   $http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
      currencyHandler.setCurrencySymbol('€');
   });
});

myApp.factory('currencyHandler', function ($locale) {
    return {
    symbol: $locale.NUMBER_FORMATS.CURRENCY_SYM,
    setCurrencySymbol: function (value) {
      this.symbol = value;
        $locale.NUMBER_FORMATS.CURRENCY_SYM = value;
    }
  }
});

<强>＆GT;＆GT; Demo fiddle

在$watch：

中使用factory的另一种方法

通过这种方式，您可以直接在控制器逻辑中设置$locale.NUMBER_FORMATS.CURRENCY_SYM：

视图

<div ng-controller="MyCtrl">
   {{ value | currency: $root.currencyHandler.symbol }}
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function (
  $scope, 
  $rootScope, 
  $filter, 
  $locale, 
  $http, 
  $timeout,
  currencyHandler
  ) {

   $scope.value = 0.00;
   $rootScope.currencyHandler = currencyHandler;

   $http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
      $locale.NUMBER_FORMATS.CURRENCY_SYM = '€'
   });
});

myApp.factory('currencyHandler', function ($locale, $rootScope) {

  let currencyHandler = {
    symbol: $locale.NUMBER_FORMATS.CURRENCY_SYM
  };

  $rootScope.$watch(function () {
    return $locale.NUMBER_FORMATS.CURRENCY_SYM;
  }, function (value) {
    currencyHandler.symbol = value;
  });

  return currencyHandler;
});

<强>＆GT;＆GT; Demo fiddle

Answer 2

您可以通过$state.reload()强制angularjs刷新$ locale影响。