单击表单中的按钮可刷新页面

2020/10/14 08:41 · javascript ·  · 0评论

我在Angular中有一个表单,其中有两个按钮标签。一键提交表单ng-click另一个按钮仅用于使用进行导航ng-click但是,当单击第二个按钮时,AngularJS会导致页面刷新,从而触发404。我在函数中删除了一个断点,并触发了我的函数。如果我执行以下任一操作,它将停止:

  1. 如果删除ng-click,该按钮不会导致页面刷新。
  2. 如果我注释掉函数中的代码,则不会刷新页面。
  3. 如果我使用将按钮标签更改为锚标签(<a>href="",则不会引起刷新。

后者似乎是最简单的解决方法,但是为什么AngularJS甚至在导致页面重新加载的函数之后运行任何代码?好像是个错误。

形式如下:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

这是控制器方法:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

如果您查看W3C规范,似乎很容易尝试做的事情是在type='button'不想提交按钮元素标记它们。

特别要注意的是它说的地方

未指定类型属性的按钮元素与类型属性设置为“提交”的按钮元素代表相同的事物

您可以尝试阻止默认处理程序:

的HTML:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

您应该ng-submit={expression}<form>标签中声明属性

从ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit

使绑定角度表达式绑定到onsubmit事件。

此外,它还阻止了默认操作(对于表单来说,这意味着将请求发送到服务器并重新加载当前页面)。

我使用指令来防止默认行为:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

然后,在html中:

<button class="secondaryButton" prevent-default>Secondary action</button>

该指令还可以与<a>和所有其他标签一起使用

你可以保留<button type="submit">,但必须删除该属性action=""<form>

我想知道为什么没人提出最简单的解决方案:

不要使用 <form>

一个<whatever ng-form>不恕我直言一个更好的工作,并没有一个HTML表单,没有什么用浏览器本身提交。使用angular时,这是正确的行为。

向表单添加操作。

<form action="#">

该答案可能与问题不直接相关。这仅适用于使用脚本提交表单的情况。

根据ng提交代码

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

它将在表单上添加提交事件侦听器。但是,通过调用form.submit()来启动Submit时,不会调用Submit事件处理程序。在这种情况下,ng-submit不会阻止默认操作,您必须在ng-submit处理程序中自己调用preventDefault;

为了提供合理的明确答案,HTML表单提交算法项目5指出,如果表单不是通过调用Submit方法提交的,则表单仅调度提交事件(这意味着仅通过按钮或其他隐式提交的表单才调度提交事件。方法,例如在焦点位于输入类型文本元素上时按Enter。

请参见onsubmit处理程序无法捕获使用链接中的commit()提交的表单

第一个按钮提交表单,第二个不提交

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

只需FormsModule文件imports数组中app.module.ts添加,然后import { FormsModule } from '@angular/forms';在该文件的顶部添加...即可。

我也遇到了同样的问题,但是很高兴我通过更改诸如fromtype="submit"to这样的类型解决了这个问题type="button"

本文地址:http://javascript.askforanswer.com/danjibiaodanzhongdeanniukeshuaxinyemian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!