AngularJS, clicking a button within a form causes page refresh

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";
 };

Answers


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"


Need Your Help

Programming to android, My layout xml files won't update when i build the project

java android xml eclipse layout

I'm working currently on a test project in order to practice some of the basic features of android layout before i get to work on my project.

Partially Solved : Excel Simple Edits to Path

excel path excel-2013

I create new Excel workbook monthly that refers to another Excel workbook(similar but different).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.