href переопределяет ng-click в Angular.Яш
когда оба, href и ng-click атрибуты определены:
<a href="#" ng-click="logout()">Sign out</a>
на href
атрибут имеет приоритет над ng-click.
Я ищу способ повысить приоритет ng-click.
href
требуется для загрузки Twitter, Я не могу удалить его.
15 ответов
этот пример с сайта угловой документации просто делает href
даже не назначая его пустой строке:
[<a href ng-click="colors.splice($index, 1)">X</a>]
вы можете просто предотвратить поведение события click по умолчанию непосредственно в шаблоне.
<a href="#" ng-click="$event.preventDefault();logout()" />
директивы, такие как 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>
В Угловой, <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 для рабочего раствора!
просто напишите 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 переопределяет ng-click в Angular.js"
- это неправильно. На самом деле происходит то, что после вашего щелчка событие click сначала обрабатывается angular(определяется ng-click
директива в угловом 1.x и click
в угловой 2.x+), а затем продолжает распространяться(что в конечном итоге запускает браузер для перехода к url-адресу, определенному с ).(См.этой подробнее о распространении событий в 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
. (Однако обратите внимание, что если пользователь щелкает правой кнопкой мыши по ссылке и напрямую открывает ссылку, то события click вообще не будет. Вместо этого он будет напрямую загружать url-адрес, указанный .)
относительно комментариев о цвете посещенных ссылок в браузерах. Опять же это не имеет ничего общего с углового, если ваш href="..."
указывает на посещенный url вашим браузером по умолчанию цвет ссылки будет отличаться. Это контролируется CSS: посетил Селектор, вы можете изменить свой css, чтобы переопределить это поведение:
a {
color:pink;
}
PS1:
некоторые ответы предлагают использовать:
<a href .../>
href
- это угловой директивы. Когда ваш шаблон обрабатывается angular, он будет преобразован в
<a href="" .../>
эти два способа по существу одинаковы.
Я не думаю, что вам нужно удалить "#" из 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>