Konvertieren Zeichenfolge in Datum in AngularJS-Direktive

Question

Ich versuche, ein Zeichenfolge-Datum zu konvertieren, so dass es auf einer HTML-Eingabe mit dem Typ funktioniert, der auf "Datum" festgelegt ist.

Also, ich habe folgende Winkel App:

(function() { 

    var app = angular.module('test', []); 

    app.controller('MainCtrl', function($scope) { 
     $scope.load = function() {      
      $scope.message='2017-12-23T00:00:00Z'; 
     }; 
    }); 

    app.directive('convertDate', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       ngModel: '=' 
      }, 
      link: function (scope) {  
       console.log(scope); 
       console.log(scope.ngModel); 

       if (scope.ngModel) scope.ngModel = new Date(scope.ngModel); 
      } 
     };    
    }); 
})(); 

Dann ist mein html wie folgt:

 <div ng-controller='MainCtrl'>   
     <input type="date" convert-date ng-model="message">    
     <button ng-click="load()">load</button> 
    </div> 

Wenn ich auf die Schaltfläche Last ich auf die folgende Fehlermeldung erhalten:

Fehler: [ngModel: datefmt] http://errors.angularjs.org/1.6.4/ngModel/datefmt?p0=2017-12-23T00%3A00%3A00Z

Ich verstehe den Fehler i s weil es eine Zeichenfolge ist und ich ein Datum brauche, was der Grund für meine Anweisung ist.

Aber selbst mit der Direktive bekomme ich immer noch den Fehler.

Was fehlt mir?

Dank

Colin

Answer 1

Sie können Ihre Richtlinie ändern, um folgende:

angular.module('app').directive('convertDate', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 
     if (!ctrl) return; 

     ctrl.$parsers.push(function(date) { 
      if (angular.isDate(date)) 
      return new Date(date); 
     }) 
     } 
    } 
    }) 

werfen Sie einen Blick auf dieses Arbeits plunkr ohne Fehler https://plnkr.co/edit/8aSR1dlsRfDMrM7GfQQa?p=preview

Answer 2

Es ist, weil Sie dieselbe Variable in ng-Modell für die Umwandlung verwendet werden. Es trifft also auf einen Fehler, bevor Ihre Anweisung es konvertiert.

Meiner Meinung nach sollten Sie es zuerst konvertieren und dann der ng-Modell-Variable in Ihrem Controller zuweisen.

Wie diese

(function() { 

    var app = angular.module('test', []); 

    app.controller('MainCtrl', function($scope) { 
     $scope.load = function() { 
      var dateString = '2017-12-23T00:00:00Z'; 
      $scope.message=new Date(dateString); 
     }; 
    }); 

})(); 

Keine Notwendigkeit Richtlinie verwenden