Question

我在一个小问题上打破了我的头脑。我的网络应用程序中有一个聊天框，其中包含一个输入[type ='text']和一个按钮。我想要的是每当用户点击按钮时，相应的消息就会发送到服务器并在按钮点击时清除输入字段。

我遇到一个问题，当用户键入input [type ='text']时，它会导致我的控制器刷新。此外，单击按钮时，控制器将刷新。

我发现很少有线程提到类似的问题，但不知何故，这些线程中提到的解决方案对我不起作用。

AngularJS, clicking a button within a form causes page refresh

以下是我的代码：

<form name="form">
  <div class="input-group">
    <input type="text" name="message" placeholder="Type Message ..." ng-model="form.newMessage" class="form-control"/><span class="input-group-btn">
      <button type="button" ng-click="submitNewMessage()" class="btn btn-info btn-flat">Send</button></span>
  </div>
</form>

有人可以帮忙吗？

由于

更新

根据建议的解决方案，我修改了我的代码。但它仍然没有成功：

<form name="form" ng-submit="submitNewMessage()">
  <div class="input-group">
    <input type="text" name="message" placeholder="Type Message ..." ng-model="form.newMessage" class="form-control"/><span class="input-group-btn">
      <button type="submit" class="btn btn-info btn-flat">Send</button></span>
  </div>
</form>

这是我的控制器代码：

$scope.submitNewMessage = function(){
  event.preventDefault();
  console.log($scope.form.newMessage);

}

另外，我甚至怀疑在输入框中写了什么，它刷新了页面。为什么会这样？它不应该等到我提交表格吗？

更新2：似乎实际问题与此不同。我创建了一个不同的问题，这也可以解决这个问题。任何人都可以请一看this吗？感谢

Answer 1

为了避免表单的子目录，您必须在submitNewMessage函数中添加event.preventDefault（）。

其他方法是删除表单标记。

Answer 2

要在单击按钮时停止重新加载页面，请尝试以下操作：

＆＃13;

$scope.submitNewMessage = function($event) {
  event.preventDefault();
  // your code
$scope.form.newMessage = ''; // to empty your input afterwards
}

＆＃13;

如何在输入表单输入时停止页面刷新？

2 个答案: