href переопределяет ng-click в Angular.Яш

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

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

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

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

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

15 ответов


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


этот пример с сайта угловой документации просто делает href даже не назначая его пустой строке:

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

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


вы можете просто предотвратить поведение события 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>