无法从指令中将 ng-model 值设置为 null

Question

在下面的示例中，当用户错误关闭弹出窗口 window 时，我试图将控制器值设置为空。但是 angularjs 以某种方式采用旧值，尽管我正在更新 $viewValue 和 $modelValue。如果您输入 input 任何值，例如 1，然后按 Tab，然后 1 秒后您将看到 1.00，但是我是试图将其设置为 null（并且视图值应为空字符串）。

(function () {

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

  module.directive('decimalTextbox', ['$timeout', function ($timeout) {
    return {
      restrict: 'A',
      replace: false,
      require: '?ngModel',
      scope: {
        onValidate: '='
      },
      link: function (scope, element, attrs, ctrl) {
      
        ctrl.$formatters.unshift(function (value) {
          return value != null ? parseFloat(value).toFixed(2) : '';
        });
        
        ctrl.$parsers.unshift(function (value) {
          return value == '' ? null : parseFloat(value);
        });
        
        $(element).on('blur', function () {
          $timeout(function () {
            var result = { isValid: true, value: ctrl.$modelValue };
            scope.onValidate(result);
            if (!result.isValid) {
              // show popup with close button here
              // to simplify example I use setTimeout
              setTimeout(function () {
                $(element).val('');
                ctrl.$viewValue = '';
                ctrl.$modelValue = null;
                scope.$apply();
                console.log(ctrl.$modelValue);
              }, 1000);
            }
          });
        });
      }
    };
  }]);
  
  module.controller('TestController', ['$scope', function (scope) {
    
    scope.someValue = 3;
    
    scope.validate = function (result) {
      result.isValid = false;
    };
    
  }]);

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

<div ng-app="TestApp" ng-controller="TestController">
  <input
    type="text"
    ng-model="someValue"
    decimal-textbox=""
    on-validate="validate">
  <h3>{{ someValue }}</h3>
</div>

Answer 1

要操作 $viewValue，请使用 $setViewValue 函数，它将注意更新 $modelValue 并调用中间 $$parsers、$$formatters 和 $$validators 幕后管道

//ctrl.$viewValue = ''; //instead of this
ctrl.$setViewValue(''); //use this.
//ctrl.$modelValue = null; //no need to set $modelValue

无法从指令中将 ng-model 值设置为 null

Cannot set ng-model value to null from directive

angularjs

angularjs-directive

angularjs-ng-model