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

Question

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

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

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

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

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

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

716 15

html angularjs anchor markup

15 ответов:

Comments

Ничего не найдено.

Geoff · Accepted Answer · 2013-02-18 18:05:41

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

Homan · Accepted Answer · 2013-08-26 21:06:02

этот пример с сайта angular documentation просто делает href даже не назначая его пустой строке:
[<a href ng-click="colors.splice($index, 1)">X</a>]
http://docs.angularjs.org/api/ng.directive:select

atroberts20 · Accepted Answer · 2014-09-19 01:35:00

вы можете просто предотвратить поведение по умолчанию для события click напрямую в шаблоне.
<a href="#" ng-click="$event.preventDefault();logout()" />
на угловое документации,

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

Muhammad Towfique Imam · Accepted Answer · 2013-04-03 21:07:44

вот еще одно решение :
<a href="" ng-click="logout()">Sign out</a>
т. е. просто удалите # из атрибута href

mPrinC · Accepted Answer · 2014-11-19 01:22:04

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

шаблон:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

pdoherty926 · Accepted Answer · 2014-12-09 22:08:55

В Угловой, <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 сценарий.

Harmon · Accepted Answer · 2017-05-23 14:54:53

это работало для меня в IE 9 и AngularJS v1.0. 7:
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
спасибо duckeggs' для рабочего раствора!

Anna · Accepted Answer · 2017-03-08 11:20:48

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

Caner · Accepted Answer · 2017-12-19 19:01:47

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

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

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

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

если вы хотите избежать этого, то вы должны отменить распространения событий с помощью интерфейс событий preventDefault() метод:
<a href="#" ng-click="$event.preventDefault();logout()" />
(это чистая функциональность javascript и ничего общего с angular)

теперь это уже решит ваша проблема, но это не оптимальное решение. Угловой, по праву, способствует MVC pattern. С помощью этого решения ваш html-шаблон смешивается с логикой javascript. Вы должны стараться избегать этого как можно больше и поместить свою логику в свой угловой контроллер. Так что лучший способ будет
<a href="#" ng-click="logout($event)" />
и в вашем методе выхода из системы:
logout($event) {
   $event.preventDefault();
   ...
}
теперь событие click не достигнет браузера, поэтому он не будет пытаться загрузить ссылку, на которую указывает href. (Однако обратите внимание, что если пользователь щелкает правой кнопкой мыши по ссылке и непосредственно открывает ссылку, то события щелчка вообще не будет. Вместо этого он будет напрямую загружать url-адрес, указанный .)

что касается комментариев о цвете посещенных ссылок в браузерах. Опять же это не имеет ничего общего с угловым, если ваш href="..." указывает на посещенный url вашим браузером по умолчанию цвет ссылки будет отличаться. Это контролируется CSS: посетил Селектор, вы можете изменить свой css, чтобы переопределить это поведение:
a {
   color:pink;
}
PS1:

некоторые ответы предлагают использовать:
<a href .../>
href - это угловой директивы. Когда ваш шаблон обрабатывается angular это будет преобразовано в
<a href="" .../>
эти два способа по существу одинаковы.

Saurabh · Accepted Answer · 2014-02-11 21:22:45

Я не думаю, что вам нужно удалить "#" из href. Следующие работы с Angularjs 1.2.10
<a href="#/" ng-click="logout()">Logout</a>

Rizo · Accepted Answer · 2018-04-27 13:26:52

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

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

BERGUIGA Mohamed Amine · Accepted Answer · 2015-05-17 17:22:29

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

Я добавляю ниже код внутри моего контроллера.
     $scope.showNumberFct = function(){
        alert("Work!!!!");
     }
и для моей страницы просмотра я добавляю ниже код.
<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

strizzwald · Accepted Answer · 2016-07-14 13:13:49

вы пытались перенаправить внутри самой функции выхода из системы? Например, предположим, что ваша функция выхода из системы выглядит следующим образом
$scope.logout = function()
{
  $scope.userSession = undefined;
  window.location = "http://www.yoursite.com/#"
}
затем вы можете просто
<a ng-click="logout()">Sign out</a>

Ajay Malhotra · Accepted Answer · 2016-09-27 18:16:49

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

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

 $scope.logout = function(event)


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

Krishna · Accepted Answer · 2017-01-31 12:26:22

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