Невозможно установить значение ng-model в null из директивы - PullRequest
Новая
       44

Невозможно установить значение ng-model в null из директивы

0 голосов
/ 04 мая 2018

В приведенном ниже примере я пытаюсь установить значение контроллера на ноль, когда пользователь закрывает всплывающее окно с ошибкой. Но angularjs как-то принимает старое значение, несмотря на то, что я обновляю $viewValue и $modelValue. Если вы введете input любое значение, например, 1, и нажмете Tab , то через 1 секунду вы увидите 1.00, однако я пытаюсь установить его на ноль (и просмотреть значение должна быть пустая строка). 

(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>

1 Ответ

0 голосов
/ 04 мая 2018

Чтобы манипулировать $viewValue, используйте функцию $setViewValue, она позаботится об обновлении $modelValue и вызовет промежуточный $$parsers, $$formatters и $$validators конвейер за кадром. 

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