Question

我正在使用angularJS，我需要一种方法来在执行ng-keydown时停止执行ng-blur，因为在某些时候ng-keydown会使元素失去焦点。

html是：

<div contenteditable ng-show="contentEditableSupport" ng-init="oldName = ''" ng-focus="oldName = userGroup.name" ng-model="userGroup.name" strip-br="true"
  ng-blur="editName(userGroup, oldName)" ng-keydown="$event.keyCode === 13 && editName(userGroup, oldName)">{{userGroup.name}}</div>

angular属性指令是：

angular.module("mainApp").directive('contenteditable', function () {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function (scope, element, attrs, ngModel) {
          //Code from: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html
          function read() {
              ngModel.$setViewValue(element.html());
          }

          ngModel.$render = function () {
              element.html(ngModel.$viewValue || "");
          };

          element.bind("blur keyup change", function () {
              scope.$apply(read);
          });

      }
  };

}）;

如果我编辑元素中的文本并单击其他地方，则会调用editName方法一次，但如果我编辑它并按Enter键，则会调用该方法两次。我试图消耗$ event.stopPropagation和类似的没有结果。

先谢谢!!

Answer 1

当用户输入enter时，您的问题似乎在于触发div失去焦点的任何代码。

您应该能够通过将&& editName(...)处理程序中的ng-keydown替换为仅导致控件失去焦点的代码来解决此问题。然后，当您按editName(...)时，它会将调用ng-blur委托给enter处理程序，以防止重复调用。

Answer 2

在指令'contentEditable'中我添加了：

          element.bind("blur keydown", function ($event) {
              if ($event.which == 13) {
                  element[0].blur();
              }
          });

我删除了div标签中的ng-keydown属性。

像魅力一样工作

AngularJS - 防止ng-keydown触发ng-blur

2 个答案: