AngularJS - форматирование ng-модели перед отображением шаблона в пользовательской директиве

Я создаю пользовательскую директиву в Angular JS. И я хочу отформатировать ng-модель до рендеринга шаблона.

Это то, что у меня есть до сих пор:

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>

Я хочу отформатировать значение unformattedDate до того, как оно будет введено в ngModel шаблона. Что-то вроде этого:

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

но это дает мне ошибку. Как это сделать?


model angularjs templates directive
person Lulu    schedule 09.04.2013    source источник

Ответы (1)


arrow_upward
25
arrow_downward

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>'
  };
});
person Caio Cunha    schedule 09.04.2013
comment
где ты взял $filter? нужно ли передавать это в функцию? Я использую средство форматирования в глобальной области для форматирования даты. так что мой текущий параметр $rootScope - person Lulu; 09.04.2013
comment
Переменная valueFromModel также возвращает неопределенное значение. я делаю что-то не так? - person Lulu; 09.04.2013
comment
Вводится $filter, как я думал, вы его используете. Если нет, просто введите $rootScope и доберитесь до фильтра. Что касается valueFromModel, возможно, что значение в начале равно null, поэтому верните либо null, либо ''. - person Caio Cunha; 09.04.2013
comment
Порядок вызова цепочки фильтров и синтаксических анализаторов также важен, если необходимо выполнить различные преобразования значения. Цепочка синтаксических анализаторов вызывается со значением представления, начинающимся с индекса массива 0, цепочка форматирования вызывается со значением модели, начинающимся с индекса массива 0. Вот почему unshift используется для средств форматирования, а push — для синтаксических анализаторов. - person ladi; 24.01.2014
comment
@Lulu, пожалуйста, отметьте ответ, если он вам поможет. - person Caio Cunha; 03.02.2014