templates - AngularJS - 在自定义指令中呈现模板之前格式化 ng-model

Question

我正在 Angular JS 中创建一个自定义指令。我想在模板呈现之前格式化 ng-model。

这是我到目前为止所拥有的：

应用程序.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>'

但这给了我一个错误。这个怎么做？

Answer 1

ngModel公开其控制器ngModelControllerAPI并为您提供这样做的方法。

在您的指令中，您可以添加$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>'
  };
});