Question

我有一个使用Ionic的移动应用程序，允许用户创建日志条目，并允许他们选择他们所在的时区。所选时区并不总是他们所在的当前时区。我使用的是angular-moment库可以做到这一点。

事情主要起作用，但我需要根据用户选择的设置将angularMomentConfig设为动态值。如果我对时区进行硬编码，那么一切都适用于该时区。

.constant('angularMomentConfig', {
  timezone: 'America/Buenos_Aires'
})

但是，我需要根据所选时区将时区设为动态值。我知道常量不能在角度应用程序中更改，因此它不适合使用。它只是我不知道该使用什么，或者它是否可能。我尝试使用.value()代替.constant()，但这并不适用于角度时刻。从我所看到的情况来看，没有办法将外部值注入常数，但也许还有一些其他方式来设置它我不知道。

目前我有一个.run来获取他们的设置并将其存储在本地，其中包括他们的时区：

.run(function(config, localStorageService, $http){
    $http({
      url: config.apiUrl + 'hos/settings/'
    }).then(function(data) {
      localStorageService.set('settings', data.data);

      // their timezone is here
      console.log(localStorageService.get('settings').timezone);
    }, function(err) {
      console.log(err);
    });
}

Answer 1

除了设置angularMomentConfig常量之外，您还可以使用 amMoment 服务，并随时调用其changeTimezone()方法，例如此代码：

.controller('mainController', function($scope, amMoment) {

    amMoment.changeTimezone('America/Buenos_Aires');

});

因此，例如，您可以在.run()函数中使用此方法。

以下是一个工作代码段，其中举例说明了这些方法和changeLocale：

angular.module('timeApp', ['angularMoment'])

.controller('mainController', function($scope, amMoment) {

  var vm = this;

  vm.time = new Date();

  $scope.timezones = [{
    id: 1,
    name: 'America/Buenos_Aires',
    locale: 'pt'
  }, {
    id: 2,
    name: 'Europe/Paris',
    locale: 'fr'
  }, {
    id: 3,
    name: 'Australia/Melbourne',
    locale: 'en'
  }];

  $scope.updateTz = function() {
    console.log("$scope.timezone=", $scope.timezone)
    amMoment.changeTimezone($scope.timezone.name);
    amMoment.changeLocale($scope.timezone.locale);
  }

  // initial default values
  $scope.timezone = $scope.timezones[0];
  $scope.updateTz();

});

<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//momentjs.com/downloads/moment-with-locales.js"></script>
<script src="//momentjs.com/downloads/moment-timezone-with-data-2010-2020.js"></script>
<script src="//rawgit.com/urish/angular-moment/master/angular-moment.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/flatly/bootstrap.min.css">

<div class="container" ng-app="timeApp" ng-controller="mainController as main">
  
  <div class="form-group">
    <label>Time zones:</label>
    <select class="form-control" ng-options="item as item.name+' ('+item.locale+')' for item in timezones track by item.id" ng-model="timezone" ng-change="updateTz()"></select>
  </div>

  <div class="well">
    <h2>Date Format <small>(filter)</small></h2>
    <time title="{{ main.time | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}">{{ main.time | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}</time>
  </div>
  
  <div class="well">
    <h2>Calendar Format <small>(filter)</small></h2>
    <time title="{{ main.time | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}">{{ main.time | amCalendar }}</time>
  </div>
  
</div>

用户设置中的角度矩动态时区

1 个答案: