Làm thế nào để ngăn chặn lỗi trên thẻ neo?

Hãy nói rằng tôi có một thẻ neo như

<a href="#" ng-click="do()">Click</a>

Làm cách nào tôi có thể ngăn trình duyệt điều hướng đến # trong AngularJS ?

CẬP NHẬT : Tôi đã thay đổi suy nghĩ về giải pháp này. Sau khi phát triển hơn và dành thời gian cho việc này, tôi tin rằng một giải pháp tốt hơn cho vấn đề này là làm như sau:

<a ng-click="myFunction()">Click Here</a>

Và sau đó cập nhật của bạn cssđể có một quy tắc bổ sung:

a[ng-click]{
    cursor: pointer;
}

Nó đơn giản hơn nhiều và cung cấp chính xác cùng chức năng và hiệu quả hơn nhiều. Hy vọng rằng có thể hữu ích cho bất cứ ai khác tìm kiếm giải pháp này trong tương lai.

Sau đây là giải pháp trước đây của tôi, mà tôi sẽ rời khỏi đây chỉ với mục đích kế thừa:

Nếu bạn đang gặp vấn đề này rất nhiều, một chỉ thị đơn giản sẽ khắc phục vấn đề này là:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

Nó kiểm tra tất cả các thẻ neo ( <a></a>) để xem liệu hrefthuộc tính của chúng là một chuỗi rỗng ( "") hay hàm băm ( '#') hoặc có một ng-clickphép gán. Nếu nó tìm thấy bất kỳ điều kiện nào trong số này, nó sẽ bắt sự kiện và ngăn hành vi mặc định.

Mặt trái duy nhất là nó chạy lệnh này cho tất cả các thẻ neo. Vì vậy, nếu bạn có nhiều thẻ neo trên trang và bạn chỉ muốn ngăn chặn hành vi mặc định cho một số ít trong số chúng, thì lệnh này không hiệu quả lắm. Tuy nhiên, tôi hầu như luôn muốn preventDefault, vì vậy tôi sử dụng chỉ thị này trong các ứng dụng AngularJS của mình.

Theo các tài liệu cho ngHref, bạn sẽ có thể rời khỏi href hoặc do href = "".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

Bạn có thể truyền đối tượng $ event cho phương thức của mình và gọi $event.preventDefault()nó để việc xử lý mặc định sẽ không xảy ra:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

Tôi thích sử dụng các chỉ thị cho loại điều này. Đây là một ví dụ

<a href="#" ng-click="do()" eat-click>Click Me</a>

Và mã lệnh cho eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Bây giờ bạn có thể thêm eat-clickthuộc tính cho bất kỳ phần tử nào và nó sẽ preventDefault()tự động được chỉnh sửa.

Những lợi ích:

1. Bạn không cần phải truyền $eventđối tượng xấu xí vào do()chức năng của mình .
2. Bộ điều khiển của bạn có thể kiểm tra được nhiều đơn vị hơn vì nó không cần phải loại bỏ $eventđối tượng

Mặc dù Renaud đã đưa ra một giải pháp tuyệt vời

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

Cá nhân tôi thấy bạn cũng cần $ event.stopPropagation () trong một số trường hợp để tránh một số tác dụng phụ

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

sẽ là giải pháp của tôi

ng-click="$event.preventDefault()"

Giải pháp đơn giản nhất tôi đã tìm thấy là giải pháp này:

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

Vì vậy, đọc qua những câu trả lời này, @Chris vẫn có câu trả lời "đúng" nhất, tôi cho rằng, nhưng nó có một vấn đề, nó không hiển thị "con trỏ" ....

Vì vậy, đây là hai cách để giải quyết vấn đề này mà không cần thêm con trỏ: kiểu con trỏ:

1. Sử dụng javascript:void(0)thay vì #:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>

2. Sử dụng $event.preventDefault()trong ng-clickchỉ thị (để bạn không bỏ qua bộ điều khiển của mình với các tham chiếu liên quan đến DOM):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>

Cá nhân tôi thích cái trước hơn cái sau. javascript:void(0)có những lợi ích khác được thảo luận ở đây . Ngoài ra còn có cuộc thảo luận về "JavaScript không phô trương" trong liên kết gần đây đáng sợ và không nhất thiết phải áp dụng trực tiếp cho một ứng dụng góc cạnh.

Bạn có thể làm như sau

1.Remove hrefthuộc tính từ neo (a thẻ )

2. Đặt con trỏ con trỏ trong css để ng nhấp vào phần tử

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

HTML

Ở đây, angularjs thuần túy: gần chức năng ng-click, bạn có thể viết hàm ngăn chặnDefDef () bằng cách tách dấu chấm phẩy

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

Mã não

$scope.do = function() {
    alert("do here anything..");
}

(hoặc là)

bạn có thể tiến hành theo cách này, điều này đã được thảo luận ở đây.

HTML

<a href="#" ng-click="do()">Click me</a>

Mã não

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

Hãy thử tùy chọn này mà tôi có thể thấy chưa được liệt kê ở trên:

<a href="" ng-click="do()">Click</a>

Vì bạn đang làm một ứng dụng web tại sao bạn cần liên kết?

Trao đổi neo của bạn để các nút!

<button ng-click="do()"></button>

nếu vẫn có liên quan:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

Cách an toàn nhất để tránh các sự kiện trên an href sẽ là xác định nó là

<a href="javascript:void(0)" ....>

Tôi sẽ đi với:

<a ng-click="do()">Click</a>

• bởi vì theo các tài liệu bạn sẽ có thể rời khỏi href và sau đó Angular sẽ xử lý mặc định ngăn chặn cho bạn!

Toàn bộ điều này ngăn chặn điều mặc định đã gây nhầm lẫn cho tôi, vì vậy tôi đã tạo ra một JSFiddle ở đó minh họa khi nào và nơi Angular đang ngăn chặn mặc định .

JSFiddle đang sử dụng một lệnh của Angular - vì vậy nó phải chính xác như vậy. Bạn có thể xem mã nguồn ở đây: mã nguồn thẻ

Tôi hy vọng điều này sẽ giúp làm rõ cho một số.

Tôi muốn đăng tài liệu lên ngHref nhưng tôi không thể vì danh tiếng của mình.

Đây là những gì tôi luôn luôn làm. Hoạt động như một lá bùa!

<a href ng-click="do()">Click</a>

Hoặc nếu bạn cần nội tuyến thì bạn có thể làm điều này:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

Rất nhiều câu trả lời dường như là quá mức cần thiết. CHO TÔI, công việc này

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

Tôi cần sự hiện diện của giá trị thuộc tính href cho sự xuống cấp (khi tắt js), vì vậy tôi không thể sử dụng thuộc tính blank href (hoặc "#"), nhưng mã ở trên không hoạt động với tôi, vì tôi cần một sự kiện ( e) biến. Tôi đã tạo ra chỉ thị của riêng mình:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

Trong HTML:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

Mượn từ câu trả lời của tennisgent. Tôi thích rằng bạn không phải tạo một chỉ thị tùy chỉnh để thêm vào tất cả các liên kết. Tuy nhiên, tôi không thể khiến anh ấy làm việc trong IE8. Đây là những gì cuối cùng đã làm việc cho tôi (sử dụng góc 1.0.6).

Lưu ý rằng 'bind' cho phép bạn sử dụng jqLite được cung cấp bởi angular nên không cần phải bọc với jQuery đầy đủ. Cũng yêu cầu phương pháp stopPropogation.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

Tôi gặp vấn đề tương tự khi sử dụng neo cho một bootstrap góc cạnh thả xuống. Giải pháp duy nhất tôi thấy rằng đã tránh được các tác dụng phụ không mong muốn (ví dụ: thả xuống không đóng vì sử dụng ngăn chặnDefault ()) là sử dụng như sau:

 <a href="javascript:;" ng-click="do()">Click</a>

nếu bạn không bao giờ muốn truy cập ... bạn nên thay đổi đánh dấu của mình và sử dụng nút không phải là thẻ neo vì về mặt ngữ nghĩa, đó không phải là neo hoặc liên kết. Ngược lại, nếu bạn có một nút thực hiện một số kiểm tra và sau đó chuyển hướng thì đó phải là một thẻ liên kết / neo và không phải là nút ... cho mục đích SEO cũng như thử nghiệm [chèn bộ kiểm tra tại đây].

đối với các liên kết mà bạn chỉ muốn chuyển hướng có điều kiện như nhắc nhở để lưu các thay đổi hoặc thừa nhận trạng thái bẩn ... bạn nên sử dụng ng-click = "someFunction ($ event)" và trong một số chức năng trên xác thực của bạnError ngăn chặn Lỗi và hoặc dừng hoạt động.

cũng chỉ vì bạn không có nghĩa là bạn nên . javascript: void (0) hoạt động tốt trở lại trong ngày ... nhưng vì các tin tặc / cracker bất hợp pháp trình duyệt các ứng dụng / trang web sử dụng javascript trong an href ... không thấy lý do gì để vịt ở trên ..

Đó là năm 2016 kể từ năm 2010, không có lý do gì để sử dụng các liên kết hoạt động như các nút ... nếu bạn vẫn phải hỗ trợ IE8 và bên dưới, bạn cần đánh giá lại địa điểm kinh doanh của mình.

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

Những gì bạn nên làm, là bỏ hrefhoàn toàn thuộc tính.

Nếu bạn xem mã nguồn của achỉ thị phần tử (là một phần của lõi Angular), thì nó nêu ở dòng 29 - 31:

if (!element.attr(href)) {
    event.preventDefault();
}

Điều đó có nghĩa là Angular đã giải quyết vấn đề liên kết mà không có a href. Vấn đề duy nhất bạn vẫn có là vấn đề css. Bạn vẫn có thể áp dụng kiểu con trỏ cho các neo có ng-click, ví dụ:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

Vì vậy, bạn thậm chí có thể làm cho trang web của mình dễ truy cập hơn bằng cách đánh dấu các liên kết thực với kiểu dáng tinh tế, khác biệt sau đó liên kết thực hiện các chức năng.

Chúc mừng mã hóa!

Bạn có thể vô hiệu hóa chuyển hướng url bên trong Html5Mode của $ location để đạt được mục tiêu. Bạn có thể xác định nó bên trong bộ điều khiển cụ thể được sử dụng cho trang. Một cái gì đó như thế này:

app.config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false,
        requireBase: false
    });
}]);

Nếu bạn đang sử dụng Angular 8 trở lên, bạn có thể tạo một lệnh:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

Trên thẻ neo của bạn trên thành phần, bạn có thể nối nó như thế này:

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

Mô-đun ứng dụng nên có tuyên bố của nó:

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

Một sự thay thế có thể là:

<span ng-click="do()">Click</span>