Angular 指令：未调用 ngModelController 自定义解析器

Question

我知道我可以在我的指令中使用格式化程序和解析器来像这样转换我的数据：

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

这里有完整的例子http://plnkr.co/edit/i59xSdVPMxRkgERhj8RE?p=preview

但是当我在我的指令中使用模板时，我无法让它工作。我的自定义解析器未被调用：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = { name: ''};
});
app.directive('changecase', function () {
  return {
    restrict: 'E',
    require: 'ngModel',
    scope: { model: '=ngModel' },
    template: '<input type="text" ng-model="model"> {{ model }}',
    link: function (scope, element, attrs, ctrl) {

      //format text going to user (model to view)
      ctrl.$formatters.push(function(value) {
        return value.toUpperCase();
      });

      //format text from the user (view to model)
      ctrl.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
});

有了这个html:

  <body ng-controller="MainCtrl">
    <changecase ng-model="data.name"></changecase>
    <pre>model is: {{data.name}}</pre>
  </body>

我猜这是一个范围或时间问题，但我无法解决。谁能看出我做错了什么？

在这里随意摆弄 Plunker：http://plnkr.co/edit/FZ4UnW8wIhIwRV2jVvfB?p=preview

Answer 1

您遇到的问题非常简单 - 在您的示例中，您有 2 个 ng-models，一个在 changecase 中，另一个在 input 中。您将格式化程序添加到第一个，但您需要第二个。所以你的指令应该是：

app.directive('changecase', function () {
  return {
    restrict: 'E',
    scope: { model: '=model' },
    template: '<input realuppercase type="text" ng-model="model"> {{ model }}',
    link: function (scope, element, attrs) {
    }
  }
});

只是模板，所以您可能想要删除它。（我将 ng-model 更改为模型，因为这里根本不需要 ngModel 指令）和新的真实大写：

app.directive('realuppercase', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      ctrl.$formatters.push(function(value) {
        return value.toUpperCase();
      });

      ctrl.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
});

这是您修改后的代码： http://plnkr.co/edit/UoSFFuCVnbAwerQYHc3o?p=preview （输入大写 -> 小写模型）

Angular 指令：未调用 ngModelController 自定义解析器

Angular Directive: ngModelController custom parser not called

angularjs

angularjs-directive

angular-ngmodel

angularjs-ng-model