Не могли бы вы уточнить «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даже для пустой строки:
Когда я пробую это сделать, все ссылки кажутся посещенными, а это не то поведение, которое мне нужно. Другой способ ( 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
Вы можете просто предотвратить поведение события щелчка по умолчанию прямо в вашем шаблоне.
Это отличное решение. Если у вас есть href, вы можете щелкнуть правой кнопкой мыши, чтобы открыть его в новой вкладке, но при щелчке левой кнопкой мыши вызывается ng-click. Именно то, что я искал
Том Грант
Еще раз отличный ответ. Работают и левый, и правый щелчок
Джей Джей Джей,
Отлично работал, позволяя управлять каруселью Bootstrap без запуска маршрутизации. Спасибо!
Джейсон Маггард,
Отлично! Я могу продолжить со ссылками и получить больше индекса в Google и использовать ng-click для вызова в Ajax. Спасибо.
Это решение работает и меняет только поведение щелчка левой кнопкой мыши, щелчок правой кнопкой мыши остается неизменным (контекстное меню), включая возможность перехода по ссылке в href. Так что это более общее решение по сравнению с TooMuchTenacious, которое фактически отвечает на вопрос более прямо.
Exocom 05
21
В Angular <a>s - это директивы . Таким образом, если у вас есть пустой файл hrefили его нет href, Angular вызовет event.preventDefault.
Работает, ссылка не меняет ваш URL и не помечается как посещенная. Лучший ответ!
Jim109
10
Здесь так много ответов на этот вопрос, но, похоже, есть некоторая путаница в том, что на самом деле здесь происходит.
Во-первых, ваша посылка
"href переопределяет ng-щелчок в Angular.js"
неправильно. На самом деле происходит то, что после вашего щелчка событие щелчка сначала обрабатывается angular (определено ng-clickдирективой в angular 1.x и clickв angular 2.x +), а затем оно продолжает распространяться (что в конечном итоге заставляет браузер перейти к URL определен с hrefатрибутом) (см . это больше о распространении событий в JavaScript)
(Это чистая функциональность javascript и не имеет ничего общего с angular)
Теперь это уже решит вашу проблему, но это не оптимальное решение. Angular по праву продвигает шаблон MVC . В этом решении ваш html-шаблон смешан с логикой javascript. Вы должны стараться избегать этого насколько возможно и помещать свою логику в свой угловой контроллер. Так что лучше было бы
<ahref="#"ng-click="logout($event)"/>
И в вашем методе logout ():
logout($event){
$event.preventDefault();...}
Теперь событие click не дойдет до браузера, поэтому он не будет пытаться загрузить указанную ссылку href. (Однако обратите внимание, что если пользователь щелкнет ссылку правой кнопкой мыши и напрямую откроет ссылку, тогда вообще не будет события щелчка. Вместо этого он будет напрямую загружать URL-адрес, указанный hrefатрибутом.)
По поводу комментариев к цвету посещенных ссылок в браузерах. Опять же, это не имеет ничего общего с angular, если вы href="..."укажете URL-адрес, посещенный вашим браузером, по умолчанию цвет ссылки будет другим. Это контролируется CSS: selected Selector , вы можете изменить свой CSS, чтобы переопределить это поведение:
a {
color:pink;}
PS1 :
В некоторых ответах предлагается использовать:
<ahref .../>
hrefэто угловая директива. Когда ваш шаблон будет обработан angular, он будет преобразован в
Вы пытались выполнить перенаправление внутри самой функции выхода из системы? Например, скажем, ваша функция выхода из системы выглядит следующим образом
//for dynamic elements - if you want it in ng-repeat do below code
angular.forEach($scope.data,function(value, key){//add new value to objectvalue.new_url ="your url";});<div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>
Ответы:
Вероятно, вам следует просто использовать тег кнопки, если вам не нужен uri.
источник
Этот пример с сайта документации angular просто не использует его
href
даже для пустой строки:http://docs.angularjs.org/api/ng.directive:select
источник
href="#"
) вызывает перезагрузку страницы, что тоже неверно.href=""
решает это.<a href="javscript:void(0)" ng-click="logout()">Sign out</a>
сослужит вам хорошую службуВы можете просто предотвратить поведение события щелчка по умолчанию прямо в вашем шаблоне.
Согласно документации angular ,
источник
Вот еще одно решение:
т.е. просто удалите # из атрибута href
источник
Еще одна подсказка. Если вам нужен реальный URL (для поддержки доступности браузера), вы можете сделать следующее:
шаблон:
директива:
Таким образом, ваш код в linkClicked () будет иметь возможность выполнить до перехода по ссылке.
источник
В Angular
<a>
s - это директивы . Таким образом, если у вас есть пустой файлhref
или его нетhref
, Angular вызоветevent.preventDefault
.Из источника :
Вот plnkr, демонстрирующий отсутствующий
href
сценарий.источник
Это сработало для меня в IE 9 и AngularJS v1.0.7:
Спасибо duckeggs за рабочее решение!
источник
Здесь так много ответов на этот вопрос, но, похоже, есть некоторая путаница в том, что на самом деле здесь происходит.
Во-первых, ваша посылка
неправильно. На самом деле происходит то, что после вашего щелчка событие щелчка сначала обрабатывается angular (определено
ng-click
директивой в angular 1.x иclick
в angular 2.x +), а затем оно продолжает распространяться (что в конечном итоге заставляет браузер перейти к URL определен сhref
атрибутом) (см . это больше о распространении событий в JavaScript)Если вы хотите этого избежать, вам следует отменить распространение события с помощью метода интерфейса The Event
preventDefault()
:(Это чистая функциональность javascript и не имеет ничего общего с angular)
Теперь это уже решит вашу проблему, но это не оптимальное решение. Angular по праву продвигает шаблон MVC . В этом решении ваш html-шаблон смешан с логикой javascript. Вы должны стараться избегать этого насколько возможно и помещать свою логику в свой угловой контроллер. Так что лучше было бы
И в вашем методе logout ():
Теперь событие click не дойдет до браузера, поэтому он не будет пытаться загрузить указанную ссылку
href
. (Однако обратите внимание, что если пользователь щелкнет ссылку правой кнопкой мыши и напрямую откроет ссылку, тогда вообще не будет события щелчка. Вместо этого он будет напрямую загружать URL-адрес, указанныйhref
атрибутом.)По поводу комментариев к цвету посещенных ссылок в браузерах. Опять же, это не имеет ничего общего с angular, если вы
href="..."
укажете URL-адрес, посещенный вашим браузером, по умолчанию цвет ссылки будет другим. Это контролируется CSS: selected Selector , вы можете изменить свой CSS, чтобы переопределить это поведение:PS1 :
В некоторых ответах предлагается использовать:
href
это угловая директива. Когда ваш шаблон будет обработан angular, он будет преобразован вЭти два способа по сути одинаковы.
источник
Просто напишите ng-click перед href .. У меня это сработало
источник
Я не думаю, что вам нужно удалять "#" из href. Следующие работы с Angularjs 1.2.10
источник
Вы также можете попробовать это:
источник
Я добавлю вам пример, который работает для меня, и вы можете изменить его, как хотите.
Я добавляю приведенный ниже код в свой контроллер.
и для моей страницы просмотра я добавляю приведенный ниже код.
источник
Вы пытались выполнить перенаправление внутри самой функции выхода из системы? Например, скажем, ваша функция выхода из системы выглядит следующим образом
Тогда ты можешь просто
источник
Пожалуйста, проверьте это
источник
источник
Это работает для меня
источник