Обработка двухсторонней привязки с использованием директивы

Question

У меня есть эта директива, которую я использую для настройки некоторых полей (внутри элемента с директивой) для использования DatePicker jQuery. Я использую эту директиву самостоятельно и внутри блоков ng-repeat.

myDirectives.directive('datePickerGroup', function() { 
    return { 
     link: function (scope, element, attrs) { 
      $(element).find('.dateDisplay').datepicker(); 
     } 
    }; 
}); 

<div date-picker-group=""> 
    <!-- Some other stuff --> 
    <input ng-model="[some model]" class="dateDisplay" /> 
</div> 

Теперь моя модель данных использует временные метки для всех этих значений даты. По понятным причинам пользователь должен видеть обычный формат даты, а не временную метку.

Итак, я пытаюсь выяснить, как создать двухстороннюю привязку данных, где привязка от модели к представлению использует формат DateDicker() DatePicker, чтобы отображать человеко-читаемую дату, а затем, когда она была изменена , привязка с точки зрения к модели использует одну и ту же функцию для перевода новой удобочитаемой даты в метку времени и сохранения ее в модели (в $ scope).

До сих пор я делал следующее:

1) После загрузки модели в контроллер (например, $ scope.data), создать эквивалентные переменные, где я храню удобочитаемых версии даты и использования те, которые привязаны к полям даты представления. Поэтому для массива временных меток в $ scope.data.stamps я бы создал $ scope.formattedDates.

2) Когда пользователь отправляет изменения, я просматриваю эти эквивалентные переменные, переформатировал их в штампы и помещал их туда, где они принадлежат модели (т. Е. $ Scope.data).

Хотя это работает, оно, очевидно, не идеально, поскольку оно не обновляет модель напрямую (в то время как другие части модели связаны непосредственно с частями $ scope.data). Поэтому я задаюсь вопросом, есть ли способ настроить его так, чтобы я привязывался к реальным переменным модели ($ scope.data.stamps в приведенном выше примере), и это повторное форматирование происходит в любом направлении двусторонней привязки данных ?

Заранее благодарим за любую помощь!

Answer 1

Рассмотрите вариант с NgModelController. С одной стороны у вас есть метка времени и в другую дату. И они однозначно соответствует:

app.controller('MainCtrl', function($scope) { 
    $scope.timestamp = 1234567890000; 
}); 

app.directive('actsAsDate', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 

      modelCtrl.$formatters.push(function (value) { 
      return (new Date(value)).toString();   
      }); 

      modelCtrl.$parsers.push(function(value) { 
      return Date.parse(value); 
      }); 

     } 
    } 
}); 

См plunker http://plnkr.co/edit/VDdmKamK8FIvq0Bf6UBv?p=preview

Удачи AngularJS.