Angolare (newbie direttiva): come aggiungere data time picker a ngModel in modo che possa essere convalidato?

Question

Sono molto nuovo per Angular e ho un caso d'uso specifico in mente Ho un modulo che ha due campi - Nome e data/ora.

Il nome è NG-modello, ma datetime non è dato che non è parte di angolare ed è un componente jquery

Cosa voglio fare?
Ecco la plunker = http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview

a.) Voglio associare data per ngModel come ngModel = "transaction.date"
b.) Convalidarlo come richiesto usando modo angolare

Qualcosa che sarà simile (molto simile angolare)

<input type="text" name="transactionDate" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" required> 

Perché?
a.) Per le cose angolari modo
b.) Fa il modello più coerente a sperimentare, convalidare

Ho fatto questa domanda sul Stackoverflow ed è stato raccomandato di utilizzare direttiva personalizzato, qualcuno mi può dare una direzione con esempio come farlo?

Vi prego di guidare ulteriormente dal momento che non sono in grado di convalidare attualmente

La ringrazio molto

Answer 1

In base alla risposta di Ketan, ho dovuto scrivere una nuova direttiva e associare il valore di forma jQuery a ng-model, che viene quindi convalidato con form. La direttiva sembra

app.directive('dateTime', function(){ 
    return { 
    restrict: 'A', 
    require: '?ngModel', 
    link: function(scope, element, attrs, ngModel){ 
     if (!ngModel) { 
     console.log('no model, returning'); 
     return; 
     } 

     element.bind('blur keyup change', function() { 
     console.log('datetime changed: ', $('.form_datetime input').val()); 
     scope.$apply(read); 
     }); 

     read(); 

     function read() { 
     ngModel.$setViewValue(element.val()); 
     } 
    } 
    } 
}); 

Il plunker può essere trovato here

Answer 2

Supponendo che si sa come scrivere le direttive, è necessario utilizzare il NgModelController all'interno della vostra direttiva e utilizzare il $setViewValue(value) metodo. (Vedi esempio nella pagina seguente).

http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

questo deve essere chiamato da vostro evento Datepicker personalizzato, che si attiva quando l'utente completa la selezione.