Динамический часовой пояс с угловым моментом от пользовательских настроек

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>