href замінює ng-клацання в Angular.js

Коли визначені атрибути href та ng-click:

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

hrefатрибут має пріоритет над нг клацанням.

Я шукаю спосіб підвищити пріоритет ng-клацання.

href потрібен для Twitter Bootstrap, я не можу його видалити.

Ймовірно, вам слід просто скористатися тегом кнопок, якщо вам не потрібен урій.

Цей приклад із сайту кутової документації просто робить, hrefнавіть не призначаючи його порожній рядку:

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

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

Ви можете просто попередити поведінку події клацання за замовчуванням безпосередньо у вашому шаблоні.

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

За кутовою документацією ,

Такі директиви, як ngClick і ngFocus, виставляють об'єкт $ події в межах цього виразу.

Ось ще одне рішення:

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

тобто просто видаліть # з атрибута href

Ще один натяк. Якщо вам потрібна реальна URL-адреса (для підтримки доступності браузера), ви можете зробити наступне:

шаблон:

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

директива:

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

Таким чином ваш код у linkClicked () матиме шанс виконати його, перш ніж перейти до посилання

В 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();
      }
    });

Ось плнкр, який демонструє відсутній hrefсценарій.

Це працювало для мене в IE 9 та AngularJS v1.0.7:

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

Дякуємо коментарю duckeggs за робоче рішення!

Тут настільки багато відповідей на це питання, але, здається, є дещо плутанини щодо того, що відбувається насправді.

По-перше, ваше приміщення

"href переосмислює ng-клацання в Angular.js"

неправильно. Насправді відбувається те, що після вашого клацання подія клацання спочатку обробляється кутовим (визначеним ng-clickдирективою у кутовій 1.х та clickу кутовій 2.х +), а потім продовжує розповсюджуватись (що врешті-решт запускає браузер переходити до URL, визначений hrefатрибутом). (Дивіться це для отримання додаткової інформації про розповсюдження подій у javascript)

Якщо ви хочете цього уникнути, вам слід скасувати поширення події, використовуючи метод інтерфейсу EventpreventDefault() :

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

(Це чисто функціональність javascript і нічого спільного з кутовим)

Тепер це вже вирішить вашу проблему, але це не оптимальне рішення. Кутовий, по праву, просуває модель MVC . З цим рішенням ваш HTML-шаблон змішується з логікою javascript. Вам слід спробувати максимально уникнути цього і ввести свою логіку у свій кутовий контролер. Тож кращий спосіб був би

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

І у вашому способі logout ():

logout($event) {
   $event.preventDefault();
   ...
}

Тепер подія клацання не дійде до браузера, тому він не намагатиметься завантажити посилання, на яке вказує href. (Однак зауважте, що якщо користувач правою кнопкою миші натискає посилання та безпосередньо відкриває посилання, то подія клацання взагалі не буде. Натомість вона безпосередньо завантажить URL, вказаний hrefатрибутом.)

Щодо коментарів щодо відвіданого кольору посилань у веб-переглядачах. Знову ж це не має нічого спільного з кутовим, якщо ваші href="..."вказівки на відвідуваний URL-адресою браузера за замовчуванням колір посилання буде іншим. Це контролюється CSS: відвідавши Selector , ви можете змінити свій css, щоб замінити цю поведінку:

a {
   color:pink;
}

PS1 :

Деякі відповіді пропонують використовувати:

<a href .../>

href- кутова директива. Коли ваш шаблон буде оброблений кутовим, він буде перетворений

<a href="" .../>

Ці два способи по суті однакові.

Просто напишіть 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. Наступні роботи з 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>

Це працює для мене

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>