AngularJS - Formatowanie modelu przed renderowaniem szablonu w niestandardowej dyrektywie

Question

Tworzę niestandardową dyrektywę w Angular JS. I chcę sformatować model ng przed renderowaniem szablonu.

To, co mam tak daleko:

app.js

app.directive('editInPlace', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'E', 
     scope: { ngModel: '=' }, 
     template: '<input type="text" ng-model="ngModel" my-date-picker disabled>' 
    }; 
}); 

html

<edit-in-place ng-model="unformattedDate"></edit-in-place> 

Chcę sformatować wartość unformattedDate zanim zostanie ona wprowadzona w ngModel z szablon. Coś takiego:

template: '<input type="text" ng-model="formatDate(ngModel)" my-date-picker disabled>' 

ale to daje mi błąd. Jak to zrobić?

Answer 1

ngModel udostępnia swój kontroler ngModelController API i oferuje sposób, aby to zrobić.

W swojej dyrektywie można dodać $formatters, które robią dokładnie to, czego potrzebujesz i $parsers, które robią odwrotnie (analizują wartość, zanim przejdzie ona do modelu).

ten sposób należy udać:

app.directive('editInPlace', function($filter) { 
    var dateFilter = $filter('dateFormat'); 

    return { 
    require: 'ngModel', 
    restrict: 'E', 
    scope: { ngModel: '=' }, 
    link: function(scope, element, attr, ngModelController) { 
     ngModelController.$formatters.unshift(function(valueFromModel) { 
     // what you return here will be passed to the text field 
     return dateFilter(valueFromModel); 
     }); 

     ngModelController.$parsers.push(function(valueFromInput) { 
     // put the inverse logic, to transform formatted data into model data 
     // what you return here, will be stored in the $scope 
     return ...; 
     }); 
    }, 
    template: '<input type="text" ng-model="ngModel" my-date-picker disabled>' 
    }; 
});