Href переопределяет ng-click в Angular.js

Если определены оба атрибута href и ng-click:

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

атрибут href имеет приоритет над ng-click.

Я ищу способ повысить приоритет ng-click.

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

В angular документации,

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

Ответ 4

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

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

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

Ответ 5

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

шаблон:

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

директива:

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

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

Ответ 6

В Angular, <a> указаны директивы. Таким образом, если у вас есть пустой href или no 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.

Ответ 7

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

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

Благодаря комментарий duckeggs для рабочего решения!

Ответ 8

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

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

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

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

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

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

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

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

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

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

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

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

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

a {
   color:pink;
}

PS1:

Некоторые ответы предлагают использовать:

<a href .../>

href - угловая директива. Когда ваш шаблон обрабатывается под углом, он будет преобразован в

<a href="" .../>

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

Ответ 9

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

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" 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>

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

Я добавляю следующий код внутри своего контроллера.

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

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

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

Ответ 13

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

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

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

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

Ответ 14

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

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

 $scope.logout = function(event)


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

Ответ 15

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

Ответ 16

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

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