单击表单中的button会刷新页面
我有一个在Angular中有两个button标签的表单。 一个button在ng-click上提交表单。 另一个button纯粹是用ng-click导航的。 但是，当第二个button被点击时，AngularJS会导致一个页面刷新，触发一个404。我在这个函数中放了一个断点，它正在触发我的函数。 如果我执行以下任一操作，则停止：
- 如果我删除
ng-click，该button不会导致页面刷新。 - 如果我注释掉函数中的代码，它不会导致页面刷新。
- 如果我将button标签更改为带有
href=""的锚定标签（<a>），则不会导致刷新。
后者似乎是最简单的解决方法，但为什么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'来标记你的button元素。
特别要注意的是它说的地方
没有指定types属性的button元素表示与其types属性设置为“提交”的button元素相同的东西
您可以尝试防止默认处理程序：
HTML：
<button ng-click="saveUser($event)">
JS：
$scope.saveUser = function (event) { event.preventDefault(); // your code }
你应该在你的<form>标签中声明属性ng-submit={expression} 。
来自ngSubmit文档http://docs.angularjs.org/api/ng.directive：ngSubmit
启用绑定angularexpression式来提交事件。
此外，它可以防止默认操作（表单意味着将请求发送到服务器并重新加载当前页面）。
我使用指令来防止默认行为：
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"> ，但必须删除<form>的属性action="" 。
我想知道为什么没有人提出最简单的解决scheme：
不要使用
<form>
一个<whatever ng-form>做恕我直言更好的工作，没有一个HTML表单，没有什么是由浏览器本身提交的。 当使用angular度时，这是正确的行为。
第一个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>
将动作添加到您的表单。
<form action="#">
