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


118

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

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

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

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

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


Не могли бы вы уточнить «href требуется для Twitter Bootstrap»? Какая его часть? CSS или JavaScript?
pkozlowski.opensource

Навигационный «виджет» Twitter Bootstrap настроен на использование ссылок. Если вы добавите к нему кнопку, даже если она стилизована под ссылку, это нарушит стиль навигации. Вероятно, это не семантический HTML, но решение @ sketchfemme делает то, что я (и, вероятно, Пол) хочу, чтобы он делал.
BenCr

Не обращайте внимания на все, что я сказал, панель навигации отлично работает с кнопками, если вы используете правильный HTML и классы. getbootstrap.com/components/#navbar
BenCr

Вы должны принять ответ Митху, который должен использовать пустой URL
Питер Моррис

1
@Paul В оригинальном плакате спрашивалось, как заставить <a href> не перемещаться. В принятом ответе говорится, что нужно переключиться на кнопку. Хотя это работает, это не решение проблемы, особенно если вы, как и я, вынуждены использовать <a href>, потому что это меню начальной загрузки или что-то в этом роде. Правильным решением этого конкретного вопроса является использование пустого URL-адреса <a href="" ng-click="whatever()"> Выйти </a>. Я протестировал его и могу подтвердить, что он работает. К счастью, кто-то другой дал правильный ответ, иначе я все равно застряну.
Питер Моррис

Ответы:


35

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


Да, если вы можете уточнить, как это требуется для Twitter Bootstrap, возможно, я смогу помочь больше.
Джефф

Как это работает с поисковыми системами? Я использую маршрутизацию AngularJS и мне нужно поддерживать состояние в службе, поэтому для всех моих внутренних ссылок приложений я использую $ location, но удаление href делает невозможным отслеживание сайта поисковыми системами.
Darrrrrren

2
внутри кнопок не может быть других элементов, поэтому для стилизации этого делать не стоит - если вам нужны вещи внутри них.
sheriffderek

246

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

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

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


3
Когда я пробую это сделать, все ссылки кажутся посещенными, а это не то поведение, которое мне нужно. Другой способ ( href="#") вызывает перезагрузку страницы, что тоже неверно.
Рис ван дер Варден,

4
Это заставляет IE9 не отображать курсор в виде руки. Использование href=""решает это.
Juampy NR

1
@juampy, передача ссылки может быть обработана с помощью CSS. Этот ответ является официальным способом AngularJS сделать это.
thenetimp

# Будет рассматриваться как хэш-ссылка.
sheriffderek

3
<a href="javscript:void(0)" ng-click="logout()">Sign out</a>сослужит вам хорошую службу
Мариос Факиолас

88

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

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

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

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


11
Это отличное решение. Если у вас есть href, вы можете щелкнуть правой кнопкой мыши, чтобы открыть его в новой вкладке, но при щелчке левой кнопкой мыши вызывается ng-click. Именно то, что я искал
Том Грант

Еще раз отличный ответ. Работают и левый, и правый щелчок
Джей Джей Джей,

Отлично работал, позволяя управлять каруселью Bootstrap без запуска маршрутизации. Спасибо!
Джейсон Маггард,

Отлично! Я могу продолжить со ссылками и получить больше индекса в Google и использовать ng-click для вызова в Ajax. Спасибо.
Guilherme IA

Отличное решение, быстрое и полезное. Спасибо!
Rocha

72

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

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

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


1
На заданный вопрос это должно быть решением. Также работал над Angular 1.1.5
Sindre

18
Кажется, что <a href="" ng-click=""> предотвратит щелчок ng в браузере Android 2.3.x. Наконец-то я использую <a href="javascript:void(0)" ng-click="">
duckegg

1
Предложение Дакегга - лучшее
Jiří Vypědřík

26

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

шаблон:

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

директива:

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

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


Это решение работает и меняет только поведение щелчка левой кнопкой мыши, щелчок правой кнопкой мыши остается неизменным (контекстное меню), включая возможность перехода по ссылке в href. Так что это более общее решение по сравнению с TooMuchTenacious, которое фактически отвечает на вопрос более прямо.
Exocom 05

21

В 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сценарий.


13

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

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

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


Работает, ссылка не меняет ваш URL и не помечается как посещенная. Лучший ответ!
Jim109

10

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

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

"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="" .../>

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


5

Просто напишите 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>


2

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

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

1

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

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

0

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

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

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

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

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

0

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

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

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

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

0

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

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

 $scope.logout = function(event)


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.