AngularJS指示文の文字列を日付に変換する

Question

文字列の日付を 'date'に設定されたhtml入力で動作させるように変換しようとしています。

だから、私は次のような角度のアプリがあります。次のように

(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); 
      } 
     };    
    }); 
})(); 

をそれから私のHTMLは次のとおりです。

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

私は、ロードボタンをクリックすると、私は次のエラーを取得：

を

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

私はエラーiを理解していますそれは文字列であり、日付が必要なので、それは私の指示の理由です。

しかし、このディレクティブを使用しても、私はまだエラーが発生します。

私には何が欠けていますか？

おかげ

コリン・

Answer 1

を使用する必要はありませんあなたは、次のあなたのディレクティブを変更することができます。

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); 
     }) 
     } 
    } 
    }) 

はエラー https://plnkr.co/edit/8aSR1dlsRfDMrM7GfQQa?p=preview

せずにこの作業plunkrを見てみましょう

Answer 2

あなたが変換するためのNG-モデルで同じ変数を使用しているからです。したがって、ディレクティブが変換する前にエラーが発生します。

私によると、最初に変換してからコントローラのng-model変数に割り当てる必要があります。このよう

、

(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); 
     }; 
    }); 

})(); 

ディレクティブ