Динамически Настройка ngModelOptions в угловых

Question

У меня есть следующий фрагмент:

<input type="date" ng-model="arrival" ng-model-options="{timezone: 'PST'}" /> 
<input type="time" ng-model="arrival" ng-model-options="{timezone: 'PST'}" /> 
{{arrival}} 

Это работает должным образом (дата отображается во время UTC, преобразованное из PST). Я сейчас пытаюсь сделать опцию «PST» динамический:

<select ng-model="timezone> 
    <option value="PST">PST</option> 
    <option value="EST">EST</option> 
</select> 
<input type="date" ng-model="arrival" ng-model-options="{timezone: timezone}" /> 
<input type="time" ng-model="arrival" ng-model-options="{timezone: timezone}" /> 
{{arrival}} 

Однако, изменение часового пояса не обновит прибытия (оказывается, что связывание не работает с nd-model-options). В любом случае я могу заставить поля обновляться при изменении часового пояса?

Редактировать

Fiddle: https://jsfiddle.net/10nfqow9/

Answer 1

Создайте другую директиву (тип атрибута) с высоким приоритетом (выше, чем нг-модель/нг-модель-опцион), который отслеживает параметры объект для изменения и вызывает повторную компиляцию. Мои извинения за отсутствие специфики, я нахожусь на телефоне :)

EDIT: Похоже, есть директива под названием kcd-recompile, которая делает именно то, что я описал. Вот работающий plnkr, с некоторыми дополнительными лакомствами для факторинга в DST для американских часовых поясов.

HTML:

<div kcd-recompile="data.timezone"> 
    <div> 
    <select ng-model="data.timezone" ng-options="x.offset as x.name for x in timezones"> 
    </select> 
    </div> 
    <div> 
    <input type="date" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" /> 
    </div> 
    <div> 
    <input type="time" ng-model="data.arrival" ng-model-options="{timezone: data.timezone}" /> 
    </div> 
</div> 

И JS:

Date.prototype.stdTimezoneOffset = function() { 
    var jan = new Date(this.getFullYear(), 0, 1); 
    var jul = new Date(this.getFullYear(), 6, 1); 
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); 
} 

Date.prototype.dst = function() { 
    return this.getTimezoneOffset() < this.stdTimezoneOffset(); 
} 

angular.module('DemoApp', ['kcd.directives']); 
angular.module('DemoApp') 
.controller('DemoCtrl', ['$scope', function($scope) { 
    var now = new Date(), 
     isDst = now.dst(); 

    $scope.data ={ 
     arrival: now, 
     timezone: null 
    }; 
    $scope.timezones = [ 
     { 
     name: 'PST', 
     offset: isDst ? '-0700' : '-0800' 
     }, 
     { 
     name: 'EST', 
     offset: isDst ? '-0400' : '-0500' 
     } 
    ]; 
    }] 
);