Angularjs 未调用ngModel$格式化程序

我想知道为什么会调用我的$parser，而不会调用我的$formatters。我在中修改了plunker以包含$parser和$formatters。看起来好像调用了我的$parser，但没有调用我的$formatters。我是否错误地使用了$parser和/或$formatters？这是我修改过的plunker:

如上所述：

---

当模型更改并且必须渲染时，将调用格式化程序。当UI表示发生更改并且必须更新模型时，将调用解析器。编辑contenteditable时，会更改UI表示，因此会调用解析器并更新模型。编辑文本区域时，首先也会发生同样的情况。但contenteditable仍显示旧模型值。因此必须调用格式化程序来显示新的格式化程序

会调用解析器，但会调用它自己的解析器，而不是您的解析器

---

格式化程序在Plunk中被调用。@zeroflagL您是否看到

从不格式化：("

正在被记录？我没有。我正在使用Chrome 37.0.2062.124。是的，每当我在textarea中更改文本时，我都会这样做。@zeroflagL好的，我只是在编辑指令所呈现的div。我想我不明白$parser和$formatter是什么时候被调用的。我已经阅读了angular文档，但我肯定遗漏了什么，因为我不明白什么时候被调用的/为什么要调用$formatters。请您解释一下，在本例中，具体调用$formatters的时间和原因好吗？谢谢！当模型更改并且必须呈现时，会调用格式化程序。当UI表示更改并且必须更新模型时，会调用解析器。当您编辑

contenteditable

时，您会更改e UI表示，因此会调用解析器并更新模型。当您编辑textarea时，首先也会发生同样的情况。但是

contenteditable

仍然显示旧的模型值。因此必须调用格式化程序来显示新的模型值。

angular.module('customControl', ['ngSanitize']).
  directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        ngModel.$parsers.push(function (viewValue) {
          console.log("parsing");
          return viewValue + "_extra_model_stuff";
        });

        ngModel.$formatters.push(function (modelValue) {
          console.log("never formats : (");
          return modelValue + "_formatted_view_stuff";
        });

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$apply(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if ( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

$scope.$watch(function ngModelWatch() {
  var modelValue = ngModelGet();

  // if scope model value and ngModel value are out of sync
  // TODO(perf): why not move this to the action fn?
  if (modelValue !== ctrl.$modelValue) {
    ctrl.$modelValue = modelValue;

    var formatters = ctrl.$formatters,
        idx = formatters.length;

    var viewValue = modelValue;
    while(idx--) {
      viewValue = formatters[idx](viewValue);
    }
    if (ctrl.$viewValue !== viewValue) {
      ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
      ctrl.$render();

      ctrl.$$runValidators(undefined, modelValue, viewValue, noop);
    }
  }

  return modelValue;
});