Javascript 单击表单中的按钮会导致页面刷新_Javascript_Angularjs

Javascript 单击表单中的按钮会导致页面刷新

javascript angularjs

Javascript 单击表单中的按钮会导致页面刷新,javascript,angularjs,Javascript,Angularjs,我有一个Angular表单，里面有两个按钮标签。单击ng上的一个按钮提交表单。另一个按钮纯粹用于使用ng单击进行导航。然而，当点击第二个按钮时，AngularJS会导致页面刷新，从而触发404。我在函数中删除了一个断点，它正在触发我的函数。如果我执行以下任一操作，它将停止：如果我删除ng单击，则该按钮不会导致页面刷新如果我注释掉函数中的代码，它不会导致页面刷新如果我使用href=”“将按钮标记更改为锚定标记（），则不会导致刷新后者似乎是最简单的解决方法，但为什么AngularJS甚至在我

我有一个Angular表单，里面有两个按钮标签。单击

ng上的一个按钮提交表单。另一个按钮纯粹用于使用ng单击进行导航。然而，当点击第二个按钮时，AngularJS会导致页面刷新，从而触发404。我在函数中删除了一个断点，它正在触发我的函数。如果我执行以下任一操作，它将停止：
如果我删除ng单击
，则该按钮不会导致页面刷新
如果我注释掉函数中的代码，它不会导致页面刷新
如果我使用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>

您应该在
标记中声明属性ngsubmit={expression}

从NGS提交文档

启用将角度表达式绑定到onsubmit事件
此外，它还阻止默认操作（对于表单，这意味着将请求发送到服务器并重新加载当前页面）。
您可以尝试阻止默认处理程序：
html:
如果您查看了，那么显然应该尝试在不希望提交按钮元素时使用type='button'
标记它们
特别要注意的是它说的地方
未指定类型属性的按钮元素与类型属性设置为“提交”的按钮元素表示相同的内容
我使用指令来防止默认行为：
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>

辅助动作

此指令也可用于
和所有其他标记
第一个按钮提交表单，第二个按钮不提交表单
<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>


S:



提交
//不要屈服
不要屈服
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Sub=函数（）
{
警报（“内部提交”）；
}
$scope.Dont=function（）
{
$scope.v=0；
}
});
您可以保留
，但必须删除
的属性action=”“
，我想知道为什么没有人提出可能最简单的解决方案：
不要使用

做得更好，如果没有HTML表单，浏览器本身就无法提交任何内容。这正是使用angular时的正确行为。
将操作添加到表单中
此答案可能与问题没有直接关系。这仅适用于使用脚本提交表单的情况
据

var handleFormSubmission=函数（事件）{
作用域$apply（函数（）{
控制器。$commitViewValue（）；
控制器.$setSubmitted（）；
});
event.preventDefault（）；
};
formElement[0]。addEventListener（'submit'，handleFormSubmission）
只需在app.module.ts
文件的imports
数组中添加FormsModule，
并从'@angular/forms'添加import{FormsModule}在这个文件的顶部…这将起作用。
我也有同样的问题，但我很高兴地通过将类型从type=“submit”
更改为type=“button”
来解决这个问题。
看看这是否是您的问题（不幸的是，我对github的了解还不够，无法判断这个补丁是否在1.0.1版本中）。我看到了这个按钮，但我没有更改位置，所以我认为它不适用。除非这个按钮导致它提交，但它没有定义为提交类型，当我取下ng时，单击按钮不会提交表单。如果您能提供此问题的工作演示，那就太好了。也许可以从：Dupe of开始看起来像是重复的。另外，请确保表单上没有设置“action”属性：表单（action=“/login”，lng submit=“login（）”）由于这将使页面刷新，即使您设置了ng submit。提交表单并阻止默认操作由于客户端角度应用程序中表单的角色不同于传统往返应用程序中的角色，因此浏览器最好不要将表单提交转换为将数据发送到se的完整页面重新加载相反，应该触发一些javascript逻辑以特定于应用程序的方式处理表单提交。因此，Angular阻止默认操作（表单提交到服务器），除非元素指定了action属性。-我有一个带有ng submit={expression}的表单和一个带有type=“submit”的按钮。除了在BB10上，工作正常。如果我使用BB10键盘的Submit，则页面将刷新。如果我使用我在表单中声明的按钮，则工作正常。这对我不起作用。我完全按照说明操作。页面仍然回发我与OP有相同的问题，但我的按钮具有指定的类型-并且仍然单击原因引用h、 还有其他地方可以看吗？这向我表明你的问题是javascript。我的答案是解决的问题更多的是dom和浏览器之间的问题。一些javascript处理你的按钮点击可能会导致你看到的重新加载。Happy hunting；）这正是我要找的。这在我的页面上是非常烦人的，因为它应该只显示错误而不提交。我的按钮标有type=“button”，并且也有问题。在ng click处理程序中，我有$event.stopPropagation（）。当我移除它时，它不会重新加载。不过我需要它。知道为什么会导致页面重新加载吗@freshfelicio：尝试添加$event.preventDefault（）
，这对我的情况很有帮助。但我无法解释原因：-\+1谢谢！当您无法访问标记，因此无法使用
module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

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

<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>