AngularJS - Mise en forme d'un modèle ng avant que le modèle ne soit rendu dans une directive personnalisée

Je suis entrain de créer un personnalisé directive en Angular JS. Et je veux formater le ng-modèle avant, le modèle qui rend.

C'est ce que j'ai à ce jour:

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>

Je veux formater le unformattedDate valeur avant qu'il est entré dans la ngModel du modèle. Quelque chose comme ceci:

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

mais qui me donne une erreur. Comment faire cela?

source d'informationauteur Lulu

  1. 25

    ngModel expose son contrôleur ngModelController API et vous offre un moyen de le faire.

    Dans vos directives, vous pouvez ajouter $formateurs qui font exactement ce dont vous avez besoin et $analyseursque faire dans l'autre sens (analyser la valeur avant de passer dans le modèle).

    C'est la façon dont vous devriez aller:

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