Question

如果我们当前正在编辑一个名为ng-submit的字段，我想阻止tags，这是特殊的，因为使用输入标记会提交标记，而不是表单。< / p>

<form ng-submit="submit()">
  <input type="foo" />
  <input type="tags" ng-keyup="submitTag($event)" />
  <input type="submit" />
</form>

并且有角度

$scope.submit = function($event) {
  if ($event.keyCode == 13) {
    $event.stopPropagation();
    return false;
    // What do I have to do?

  }
};

我还尝试将输入绑定到ng-submit。如果用户正在编辑代码的keyCode == 13 和，我如何阻止Angular运行提交代码？

Answer 1

需要为此创建一个指令：

app.directive('tags',function() {
    return {
        restrict:'A',
        link: function(scope,element,attr) {
            element.on('keydown',function(e) {
                if (e.which == "13") {
                    e.preventDefault();
                }
            });
        }
    }
});

HTML

<input type="text" tags>

Answer 2

您可以通过在表单外移动提交按钮来完成此操作，如下所示

<form name="myForm">
      <input type="foo" />
      <input type="tags" ng-keyup="submitTag($event)" />
    </form>
    <button ng-click="submit()">Submit</button>
  </body>

$scope.submit = function($event) {
    if (!$scope.myForm.$valid) {
             return;
        }

    alert('submit form');
  };

  $scope.submitTag = function(event){

    alert('submit tag');
  };

这是一个工作的plunker

http://plnkr.co/edit/7G22wcR9UsbIsH9LtT11?p=preview

Answer 3

创建新指令的另一种方法是使用angulars ngKeydown。 注意：不要使用ngKeyup b / c事件在ngSubmit之后触发。

<强>模板：

<input type="text" ng-model="x" ng-keydown="$event.which === 13 ? fn($event) : null;" />

<强>控制器：

$scope.fn = function($event)
{
  if(_.isObject($event))
  {
    $event.preventDefault();
  }

  // Continue with whaterver this fn is supposed to do
};

使用子元素指令阻止父ng-submit？

3 个答案: