href переопределяет ng-щелчок в Angular.js

Когда определены оба атрибута, href и ng-click:

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

hrefатрибут имеет приоритет над нг щелчком.

Ищу способ поднять приоритет ng-click.

href требуется для Twitter Bootstrap, я не могу его удалить.

Вероятно, вам следует просто использовать тег кнопки, если вам не нужен uri.

Этот пример с сайта документации angular просто не использует его hrefдаже для пустой строки:

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

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

Вы можете просто предотвратить поведение события щелчка по умолчанию прямо в вашем шаблоне.

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

Согласно документации angular ,

Такие директивы, как ngClick и ngFocus, раскрывают объект $ event в рамках этого выражения.

Вот еще одно решение:

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

т.е. просто удалите # из атрибута href

Еще одна подсказка. Если вам нужен реальный URL (для поддержки доступности браузера), вы можете сделать следующее:

шаблон:

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

директива:

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

Таким образом, ваш код в linkClicked () будет иметь возможность выполнить до перехода по ссылке.

В Angular <a>s - это директивы . Таким образом, если у вас есть пустой файл hrefили его нет href, Angular вызовет event.preventDefault.

Из источника :

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

Вот plnkr, демонстрирующий отсутствующий hrefсценарий.

Это сработало для меня в IE 9 и AngularJS v1.0.7:

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

Спасибо duckeggs за рабочее решение!

Здесь так много ответов на этот вопрос, но, похоже, есть некоторая путаница в том, что на самом деле здесь происходит.

Во-первых, ваша посылка

"href переопределяет ng-щелчок в Angular.js"

неправильно. На самом деле происходит то, что после вашего щелчка событие щелчка сначала обрабатывается angular (определено ng-clickдирективой в angular 1.x и clickв angular 2.x +), а затем оно продолжает распространяться (что в конечном итоге заставляет браузер перейти к URL определен с hrefатрибутом) (см . это больше о распространении событий в JavaScript)

Если вы хотите этого избежать, вам следует отменить распространение события с помощью метода интерфейса The EventpreventDefault() :

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

(Это чистая функциональность javascript и не имеет ничего общего с angular)

Теперь это уже решит вашу проблему, но это не оптимальное решение. Angular по праву продвигает шаблон MVC . В этом решении ваш html-шаблон смешан с логикой javascript. Вы должны стараться избегать этого насколько возможно и помещать свою логику в свой угловой контроллер. Так что лучше было бы

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

И в вашем методе logout ():

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

Теперь событие click не дойдет до браузера, поэтому он не будет пытаться загрузить указанную ссылку href. (Однако обратите внимание, что если пользователь щелкнет ссылку правой кнопкой мыши и напрямую откроет ссылку, тогда вообще не будет события щелчка. Вместо этого он будет напрямую загружать URL-адрес, указанный hrefатрибутом.)

По поводу комментариев к цвету посещенных ссылок в браузерах. Опять же, это не имеет ничего общего с angular, если вы href="..."укажете URL-адрес, посещенный вашим браузером, по умолчанию цвет ссылки будет другим. Это контролируется CSS: selected Selector , вы можете изменить свой CSS, чтобы переопределить это поведение:

a {
   color:pink;
}

PS1 :

В некоторых ответах предлагается использовать:

<a href .../>

hrefэто угловая директива. Когда ваш шаблон будет обработан angular, он будет преобразован в

<a href="" .../>

Эти два способа по сути одинаковы.

Просто напишите ng-click перед href .. У меня это сработало

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

Я не думаю, что вам нужно удалять "#" из href. Следующие работы с Angularjs 1.2.10

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

Вы также можете попробовать это:

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

Я добавлю вам пример, который работает для меня, и вы можете изменить его, как хотите.

Я добавляю приведенный ниже код в свой контроллер.

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

и для моей страницы просмотра я добавляю приведенный ниже код.

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

Вы пытались выполнить перенаправление внутри самой функции выхода из системы? Например, скажем, ваша функция выхода из системы выглядит следующим образом

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

Тогда ты можешь просто

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

Пожалуйста, проверьте это

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

Это работает для меня

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