href ghi đè ng-click trong Angular.js

Khi cả hai thuộc tính href và ng-click được xác định:

<a href="#" ng-click="logout()">Sign out</a>

các hrefthuộc tính được ưu tiên hơn ng nhấp chuột.

Tôi đang tìm cách để tăng mức độ ưu tiên của ng-click.

href là bắt buộc cho Twitter Bootstrap, tôi không thể xóa nó.

Bạn có thể chỉ nên sử dụng thẻ nút nếu bạn không cần đi tiểu.

Ví dụ này từ trang web tài liệu góc chỉ làm hrefmà không cần gán nó vào một chuỗi trống:

[<a href ng-click="colors.splice($index, 1)">X</a>]

http://docs.angularjs.org/api/ng.directive:select

Bạn có thể chỉ cần ngăn chặn hành vi mặc định của sự kiện nhấp chuột trực tiếp trong mẫu của mình.

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

Theo tài liệu góc cạnh ,

Các lệnh như ngClick và ngFocus hiển thị một đối tượng $ event trong phạm vi của biểu thức đó.

Đây là một giải pháp khác:

<a href="" ng-click="logout()">Sign out</a>

tức là Chỉ cần xóa # khỏi thuộc tính href

Chỉ một gợi ý nữa. Nếu bạn cần URL thực (để hỗ trợ khả năng truy cập của trình duyệt), bạn có thể làm như sau:

bản mẫu:

<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

chỉ thị:

$scope.linkClicked = function(link){
    // your code here
    $location.path(link);
};

Bằng cách này, mã của bạn trong linkClicked () sẽ có cơ hội thực thi trước khi điều hướng đến liên kết

Trong Angular, <a>s là các chỉ thị . Như vậy, nếu bạn có trống hrefhoặc không href, Angular sẽ gọi event.preventDefault.

Từ nguồn :

    element.on('click', function(event){
      // if we have no href url, then don't navigate anywhere.
      if (!element.attr(href)) {
        event.preventDefault();
      }
    });

Đây là một plnkr chứng minh hrefkịch bản mất tích .

Điều này đã làm việc cho tôi trong IE 9 và AngularJS v1.0.7:

<a href="javascript:void(0)" ng-click="logout()">Logout</a>

Cảm ơn bình luận của duckeggs cho giải pháp làm việc!

Có rất nhiều câu trả lời cho câu hỏi này ở đây nhưng có vẻ như có một chút nhầm lẫn về những gì thực sự đang diễn ra ở đây.

Thứ nhất, tiền đề của bạn

"href ghi đè ng-click trong Angular.js"

sai. Điều thực sự đang xảy ra là sau lần nhấp của bạn, sự kiện nhấp chuột đầu tiên được xử lý bằng góc (được xác định bởi ng-clickchỉ thị trong góc 1.x và clicktrong góc 2.x +) và sau đó nó tiếp tục lan truyền (cuối cùng sẽ kích hoạt trình duyệt điều hướng đến url được xác định bằng hrefthuộc tính). (Xem phần này để biết thêm về truyền sự kiện trong javascript)

Nếu bạn muốn tránh điều này, thì bạn nên hủy truyền sự kiện bằng phương thức của giao diện Sự kiệnpreventDefault() :

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

(Đây là chức năng javascript thuần túy và không liên quan gì đến góc cạnh)

Bây giờ, điều này đã giải quyết được vấn đề của bạn nhưng đây không phải là giải pháp tối ưu. Angular, một cách đúng đắn, thúc đẩy mô hình MVC . Với giải pháp này, mẫu html của bạn được trộn với logic javascript. Bạn nên cố gắng tránh điều này càng nhiều càng tốt và đặt logic của bạn vào bộ điều khiển góc của bạn. Vì vậy, một cách tốt hơn sẽ là

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

Và trong phương thức logout () của bạn:

logout($event) {
   $event.preventDefault();
   ...
}

Bây giờ sự kiện nhấp chuột sẽ không đến trình duyệt, vì vậy nó sẽ không cố tải liên kết được trỏ đến href. (Tuy nhiên, lưu ý rằng nếu người dùng nhấp chuột phải vào liên kết và trực tiếp mở liên kết, thì sẽ không có sự kiện nhấp chuột nào cả. Thay vào đó, nó sẽ tải trực tiếp url được trỏ bởi hrefthuộc tính.)

Về nhận xét về màu liên kết đã truy cập trong trình duyệt. Một lần nữa, điều này không liên quan gì đến góc cạnh, nếu bạn href="..."trỏ đến một url được truy cập bởi trình duyệt của bạn theo mặc định, màu liên kết sẽ khác. Điều này được kiểm soát bởi CSS: đã thăm Bộ chọn , bạn có thể sửa đổi css của mình để ghi đè hành vi này:

a {
   color:pink;
}

PS1 :

Một số câu trả lời gợi ý sử dụng:

<a href .../>

hreflà một chỉ thị góc. Khi mẫu của bạn được xử lý theo góc, nó sẽ được chuyển đổi thành

<a href="" .../>

Hai cách đó về cơ bản là giống nhau.

Chỉ cần viết ng-click trước href .. Nó hoạt động với tôi

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script>
    angular.module("module",[])
.controller("controller",function($scope){
  
  $scope.func =function(){
    console.log("d");
  }
  
})</script>
  </head>

  <body ng-app="module" ng-controller="controller">
    <h1>Hello ..</h1>
    <a ng-click="func()" href="someplace.html">Take me there</a>
  </body>

</html>

Tôi không nghĩ bạn cần xóa "#" khỏi href. Tiếp theo các hoạt động với Angularjs 1.2.10

<a href="#/" ng-click="logout()">Logout</a>

Bạn cũng có thể thử điều này:

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>

Tôi sẽ thêm cho bạn một ví dụ phù hợp với tôi và bạn có thể thay đổi nó theo ý muốn.

Tôi thêm mã dưới đây vào bên trong bộ điều khiển của mình.

     $scope.showNumberFct = function(){
        alert("Work!!!!");
     }

và cho trang xem của tôi, tôi thêm mã dưới đây.

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

Bạn đã thử chuyển hướng bên trong chính chức năng đăng xuất chưa? Ví dụ: giả sử chức năng đăng xuất của bạn như sau

$scope.logout = function()
{
  $scope.userSession = undefined;
  window.location = "http://www.yoursite.com/#"
}

Sau đó, bạn chỉ có thể có

<a ng-click="logout()">Sign out</a>

Làm ơn kiểm tra cái này

<a href="#" ng-click="logout(event)">Logout</a>

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

//for dynamic elements - if you want it in ng-repeat do below code

angular.forEach($scope.data, function(value, key) {
     //add new value to object
    value.new_url  = "your url";
});

 <div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>

Điều này phù hợp với tôi

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>