AngularJS，点击表格中的一个按钮会刷新页面 [英] AngularJS, clicking a button within a form causes page refresh

问题描述

我有角的形式，它有两个按钮的标签。一键提交的NG-单击窗体。另一个按钮是纯粹用NG-点击导航。但是，单击此第二个按钮时Angularjs导致页面刷新触发404。我在功能下降断点，它是我的触发功能。如果我做任何下列停止：

1. 如果我删除NG单击该按钮不会导致页面刷新。


2. 如果我在函数注释掉code它不会导致页面刷新。


3. 如果我的按钮标签更改为锚标记（一）与HREF =，那么它​​不会导致刷新。

后来是最简单的解决办法，但为什么连角运行我的功能，导致页面重新加载后的任何code？似乎是一个错误。

下面的形式：

 ＆LT;窗​​体类=形横NAME =我的资料NG-开关时=配置文件＆GT;
   ＆LT;＆字段集GT;      ＆LT; D​​IV CLASS =控制组＆GT;
         ＆LT;标签类=控制标签为=passwordButton＆GT;密码和LT; /标签＆gt;
         ＆LT; D​​IV CLASS =控制＆GT;
            ＆LT;按钮ID =passwordButton级=secondaryButtonNG点击=showChangePassword（）＆GT;变化与LT; /按钮＆GT;
         ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;      ＆LT; D​​IV CLASS =按钮栏＆GT;
           ＆LT;按钮ID =saveProfileButton级=primaryButtonNG点击=saveUser（）＆GT;保存＆LT; /按钮＆GT;
      ＆LT; / DIV＆GT;
   ＆LT; /字段集＆GT;
＆LT; /表及GT;
 

下面是控制器的方法：

  $ scope.showChangePassword =功能（）{
    $ scope.selectedLink =的ChangePassword;
 };
 

解决方案

如果你有看 W3C规范，这似乎像明显的事情是尝试，以纪念与您的按钮元素类型=按钮当你不希望他们提交

特别要注意的一点是它说：

  

无类型属性的按钮元素重新指定presents同样的事情与设置为提交的类型属性按钮元素

I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked Angularjs is causing a page refresh which triggers a 404. I've dropped a breakpoint in the function and it is triggering my function. If I do any of the following it stops:

1. If I remove the ng-click the button doesn't cause a page refresh.
2. If I comment out the code in the function it doesn't cause a page refresh.
3. If I change the button tag to an anchor tag (a) with href="" then it doesn't cause a refresh.

The later being the simplest workaround, but why is Angular even running any code after my function that causes the page to reload? Seems like a bug.

Here is the form:

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

Here is the controller method:

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

解决方案

If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.

The thing to note in particular is where it says

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"

这篇关于AngularJS，点击表格中的一个按钮会刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！