Question

我正在制作一个指令，它会在聚焦时阻止输入。

用例是我们从后端接收频繁的实时更新，并且由于ng-model绑定，它将覆盖用户在输入中写入的任何内容。我们使用ng-keydown="($event.keyCode === 13) ? $ctrl.setItem($event, $ctrl.item) : return"按Enter键发送更新，其中$ ctrl.setItem将向后端发送请求。

我几乎让它像我想要的那样工作，只有当我在编辑后模糊输入时我得到了惊人的结果。

我做了一个使用$ interval来模拟后端更新的plunker：https://plnkr.co/edit/XNFA3bQtbGliAhS0uVmP?p=preview

app.directive('noUpdatesWhenFocused', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel || element[0].type !== 'text') {
        return;
      }

      var hasFocus = false;
      element.on('focus', function() {
        hasFocus = true;
      });
      element.on('blur', function() {
        hasFocus = false;
        ngModel.$render();
      });

      ngModel.$render = function() {
        if (!hasFocus) {
          element.val(ngModel.$viewValue);
        }
      };
    }
  };
});

如果在第一个输入字段中进行编辑后模糊并等待几秒钟以进行新的“更新”，则模型将恢复为上一次视图编辑的状态，而不是最后一次模型更新。我们总是希望从后端显示最新的更新，所以这是我需要解决的问题，但我很难过。

Answer 1

好吧我明白了。在模糊事件之前，ngModel。$ pasers被触发了。所以我添加了一个解析器，如果它从上次调用解析器时没有改变，则忽略viewValue，如果你模糊，它就没有。

var app = angular.module('myApp', []);

app.directive('noUpdatesWhenFocused', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel || element[0].type !== 'text') {
        return;
      }

      var hasFocus = false;
      element.on('focus', function() {
        hasFocus = true;
      });
      element.on('blur', function() {
        hasFocus = false;
        ngModel.$render();
      });
      
      ngModel.$render = function() {
        if (!hasFocus) {
          element.val(ngModel.$viewValue);
        }
      };
      
      var vValue = ngModel.$viewValue;
      ngModel.$parsers.unshift(function(viewValue) {
        var returnValue = viewValue === vValue ? ngModel.$modelValue : viewValue;
        ngModel.$setViewValue(returnValue);
        ngModel.$render();
        vValue = viewValue;
        return returnValue;
      });
    }
  };
});

app.run(function($rootScope, $interval) {
  $rootScope.item = 'item';
  $interval(function(count) {
    if (typeof count === 'number') {
      if($rootScope.item) {
        $rootScope.item = $rootScope.item + '' + count;
      }
      else {
        $rootScope.item = '' + count;
      }
      console.log($rootScope.item);
    }
  },3000);
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
  <form name="myForm">
    <input
      no-updates-when-focused
      name="item1"
      ng-model="item"
      size="50"
      required>
    </input>
    <span ng-show="myForm.item1.$error.required">Required!</span>
    </br>
    <input
      name="item2"
      ng-model="item"
      size="50"
      required>
    </input>
    <span ng-show="myForm.item2.$error.required">Required!</span>
  </form>
</body>
</html>

输入聚焦时没有ng-model更新

1 个答案: