2017-12-22 35 views
0

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

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

(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を理解していますそれは文字列であり、日付が必要なので、それは私の指示の理由です。

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

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

おかげ

コリン・

+0

なぜ入力にディレクティブを追加する必要がありますか?単純に 'ng-change =" convertToDate() "'を入力に追加して、入力をコントローラ自体の中の日付に変換するのはなぜでしょうか。この場合、指示は必要ありません。 –

+0

はい、私はこれを使用する必要があるページの負荷があり、各ページには独自のコントローラがあります。私は各コントローラにメソッドを必要としません。 – Sun

+0

次に、サービスを追加することをお勧めします。これは、Directive shenanigansを必要とせずにすべてのコントローラでジョブを実行できる 'convertToDate'メソッドを提供します。 –

答えて

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を見てみましょう
+0

前と同じエラー – Sun

+0

はプランカを確認しています。 – Rachmaninoff

0

あなたが変換するための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); 
     }; 
    }); 

})(); 

ディレクティブ

関連する問題