문자열을 날짜로 변환하여 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); 
     }) 
     } 
    } 
    }) 

오류없이이 작업 plunkr에서 살펴 https://plnkr.co/edit/8aSR1dlsRfDMrM7GfQQa?p=preview

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

})(); 

당신은 다음에 지시문을 변경할 수 있습니다 지시자에게