Nhấp vào nút trong biểu mẫu gây ra làm mới trang

Tôi có một hình thức trong Angular có hai thẻ nút trong đó. Một nút gửi biểu mẫu trên ng-click. Nút còn lại hoàn toàn để điều hướng sử dụng ng-click. Tuy nhiên, khi nhấp vào nút thứ hai này, AngularJS đang gây ra việc làm mới trang sẽ kích hoạt 404. Tôi đã bỏ điểm dừng trong chức năng và nó đang kích hoạt chức năng của tôi. Nếu tôi làm bất kỳ điều nào sau đây, nó sẽ dừng:

1. Nếu tôi loại bỏ ng-click, nút không gây ra làm mới trang.
2. Nếu tôi nhận xét mã trong hàm, nó không gây ra làm mới trang.
3. Nếu tôi thay đổi thẻ nút thành thẻ neo ( <a>) href="", thì nó không gây ra làm mới.

Cái sau có vẻ như là cách giải quyết đơn giản nhất, nhưng tại sao AngularJS thậm chí còn chạy bất kỳ mã nào sau chức năng của tôi khiến trang tải lại? Có vẻ như một lỗi.

Đây là mẫu:

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

Đây là phương pháp điều khiển:

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

Nếu bạn có một cái nhìn về đặc tả W3C , có vẻ như điều rõ ràng cần thử là đánh dấu các yếu tố nút của bạn type='button'khi bạn không muốn chúng gửi.

Điều cần lưu ý đặc biệt là nơi nó nói

Một phần tử nút không có thuộc tính loại được chỉ định đại diện cho điều tương tự như một phần tử nút với thuộc tính loại được đặt thành "gửi"

Bạn có thể cố gắng ngăn trình xử lý mặc định:

html:

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

js:

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

Bạn nên khai báo thuộc tính ng-submit={expression}trong <form>thẻ của bạn .

Từ các tài liệu ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Cho phép các biểu thức góc ràng buộc với các sự kiện onsubmit.

Ngoài ra, nó ngăn chặn hành động mặc định (đối với biểu mẫu có nghĩa là gửi yêu cầu đến máy chủ và tải lại trang hiện tại).

Tôi sử dụng chỉ thị để ngăn chặn hành vi mặc định:

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

Và sau đó, trong html:

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

Lệnh này cũng có thể được sử dụng với <a>và tất cả các thẻ khác

Bạn có thể giữ <button type="submit">, nhưng phải loại bỏ thuộc tính action=""của <form>.

Tôi tự hỏi tại sao không ai đề xuất giải pháp đơn giản nhất có thể:

không sử dụng một <form>

Một <whatever ng-form>không IMHO một công việc tốt hơn và không có một hình thức HTML, không có gì để được nộp bởi trình duyệt riêng của mình là. Mà chính xác là hành vi đúng khi sử dụng góc.

Thêm hành động vào biểu mẫu của bạn.

<form action="#">

Câu trả lời này có thể không liên quan trực tiếp đến câu hỏi. Nó chỉ dành cho trường hợp khi bạn gửi biểu mẫu bằng cách sử dụng tập lệnh.

Theo mã ng-nộp

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

  event.preventDefault();
};

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

Nó thêm trình lắng nghe sự kiện trên mẫu. Nhưng trình xử lý sự kiện sẽ không được gọi khi việc gửi được bắt đầu bằng cách gọi form.submit (). Trong trường hợp này, ng-submit sẽ không ngăn chặn hành động mặc định, bạn phải tự gọi ngăn chặn Default trong trình xử lý ng-submit;

Để cung cấp câu trả lời dứt khoát hợp lý, mục Thuật toán gửi biểu mẫu HTML 5 nêu rõ rằng một biểu mẫu chỉ gửi một sự kiện gửi nếu nó không được gửi bằng cách gọi phương thức gửi (có nghĩa là nó chỉ gửi một sự kiện gửi nếu được gửi bằng nút hoặc ẩn khác phương thức, ví dụ nhấn enter trong khi tiêu điểm nằm trên phần tử văn bản loại đầu vào).

Xem Biểu mẫu được gửi bằng cách sử dụng submit () từ một liên kết không thể bị bắt bởi trình xử lý onsubmit

Nút đầu tiên gửi biểu mẫu và nút thứ hai không

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

Chỉ cần thêm FormsModulevào importsmảng của app.module.tstệp và thêm import { FormsModule } from '@angular/forms';ở đầu tệp này ... điều này sẽ hoạt động.