Question

我想知道为什么我的$解析器被调用但我的$ formatters没有被调用。我修改了Custom Control Example中的plunker以包含$ parsers和$ formatters。看起来我的$解析器被调用但我的$ formatters没有被调用。我错误地使用$ parsers和/或$ formatters吗？这是我修改过的plunker：http://plnkr.co/edit/o1EM05AtDGw2OMDwv9dR。

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

仔细检查angular.js后，看起来ctrl指的是ngModelController。我希望它能引用我添加格式化程序的ngModelController。但是，它是ctrl。$ formatters是一个空数组，所以这必须是一个不同的ngModelController。我不明白为什么。

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

Answer 1

如上所述：

当模型更改并且必须呈现时，将调用格式化程序。当UI表示更改并且必须更新模型时，将调用解析器。编辑contenteditable时，您更改UI表示，因此将调用解析器并更新模型。编辑textarea时，首先会发生相同的情况。但满意的仍然显示旧的模型价值。因此必须调用格式化程序来显示新格式化程序。

调用解析器，但是它自己的解析器，不是你的。

没有调用ngModel $格式化程序

1 个答案: