Question

当按下退出键时，将输入字段设置为其先前值的正确方法是什么？

我找到了这个指令：

.directive('resetWithEsc', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, controller) {
            element.on('keydown', function(ev) {
                if (ev.keyCode != 27) return;

                scope.$apply(function() {
                    controller.$setViewValue("");
                    controller.$render();
                });
            });
        }
    };
})

但它说TypeError: Cannot read property '$setViewValue' of null

我也尝试存储了prev。 $ scope.temp中的值和used指令用于检测ESC按：

.directive('escKey', function () {
    return function (scope, element, attrs) {
        element.bind('keyup', function (event) {
            console.log("UP");
            if(event.which === 27) { // 27 = esc key
                console.log("ESC");
                scope.$apply(function (){
                    scope.$eval(attrs.escKey);
                });
                event.preventDefault();
            }
        });
    };
})

然后我就这样使用它：

<input data-ng-focus="temp = mymodel.value"
    ng-model-options="{updateOn: 'blur'}" esc-key="mymodel.value = temp" 
    type="text" data-ng-model="mymodel.value"
/>

它检测到退出键是否正确，如果我设置了esc-key="mymodel.value = 'TEST'"，它还会将输入字段设置为'TEST'，但使用变量它不起作用。

那么最好的选择是什么？我需要它在动态中用于重复循环。

Answer 1

删除updateOn: 'blur'并重置temp就行了......

<input data-ng-focus="temp = mymodel.value"
    esc-key="mymodel.value = temp; temp='';" 
    type="text" data-ng-model="mymodel.value"
/>

对于更清洁的解决方案仍然感到高兴，因为喜欢仅在模糊时更新模型。

Answer 2

我以@Bharat的pl头为例，并对其进行了调整以使用指令。

(function(angular) {
  'use strict';
  angular.module('optionsExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.users = [
        {
          name: 'name1',
          data: ''
        },
        {
          name: 'name2',
          data: ''
        },
        {
          name: 'name3',
          data: ''
        },
      ];
    }])
    .directive('escape', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          element.bind('keyup', function (event) {
            if(event.which === 27) { // 27 = esc key
              ngModel.$rollbackViewValue();
              event.preventDefault();
            }
          });
        }
      }
    });
})(window.angular);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example - example-ngModelOptions-directive-blur-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="optionsExample">
    <div ng-controller="ExampleController">
      <form name="userForm">
        <ul>
          <li data-ng-repeat="user in users">
            <label>Name:
              <input
                type="text"
                name="userName{{$index}}"
                ng-model="user.name"
                escape
                ng-model-options="{updateOn: 'blur change'}"/>
            </label>
            <br />
            <pre>user.name = <span ng-bind="user.name"></span></pre>
          </li>
        </ul>
      </form>
    </div>
  </body>

</html>

如何将Escape上的输入字段重置为上一个值

2 个答案: