AngularJS - カスタムディレクティブでテンプレートがレンダリングされる前にng-modelをフォーマットする

Question

私はAngular JSでカスタムディレクティブを作成しています。テンプレートをレンダリングする前にng-modelをフォーマットしたいと思います。

これは私がこれまで持っているものです。私はそれはのngModelに入る前にunformattedDate値をフォーマットしたい

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> 

テンプレート。このようなもの：

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

しかし、それは私にエラーを与えます。これを行う方法？

Answer 1

ngModelはコントローラngModelController APIを公開しています。

ディレクティブでは、あなたが必要とする通りに$formattersを追加し、逆に（モデルに行く前に値を解析する）$parsersを追加することができます。

これは、あなたが行くべきかです：あなたは$フィルターを手に入れた

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