AngularJS - Định dạng ng-model trước khi mẫu được hiển thị trong chỉ thị tùy chỉnh

Question

Tôi đang tạo một chỉ thị tùy chỉnh trong Angular JS. Và tôi muốn định dạng mô hình ng trước khi khuôn mẫu hiển thị.

Đây là những gì tôi có cho đến nay:

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> 

Tôi muốn định dạng các giá trị unformattedDate trước khi nó được nhập vào ngModel của bản mẫu. Một cái gì đó như thế này:

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

nhưng điều đó mang lại cho tôi một lỗi. làm như thế nào?

Answer 1

ngModel bộc lộ bộ điều khiển ngModelController API và cung cấp cho bạn cách làm như vậy.

Trong chỉ thị của bạn, bạn có thể thêm $formatters thực hiện chính xác những gì bạn cần và $parsers, thực hiện theo cách khác (phân tích giá trị trước khi chuyển sang mô hình).

Đây là cách bạn nên đi:

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