防止默認的錨定行爲AngularJS

當用戶點擊鏈接時，我想在控制器內部的函數中執行一些代碼。但我想阻止URL的更改。防止默認的錨定行爲AngularJS

我嘗試了以下可能性

刪除了的href屬性。 沒有工作，仍然改變URL以 '/'
在我deleteUser嘗試ng-click='deleteUser(user.id, $event)'和$event.preventDefault()（） - 功能。 沒有工作。
什麼工作是我在GitHub上發現的關於unintended reload的黑客攻擊。

這是我要做的事現在：

<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a>

問題

什麼是the'clean」的方法，以防止改變URL的鏈接？

來源

2012-09-12 Voles

爲什麼不使用href =「＃」？ –

或者只是'''href =「」'''？ – opyate

+1給opyate，'href =「」'解決了我的問題。 'href =「＃」'重新路由到'＃/'，以便在點擊時重定向。 –

真正的問題是在a directive

這是正確的，每<a></a>元素實際上是一個AngularJS指令。

如果你看看代碼中的註釋，它似乎解決了IE的一些問題。

但是，當我剛剛從AngularJS核心代碼中刪除了指令時，對我來說，一切都很好。

我遇到了同樣的問題，並嘗試了所有其他解決方案。不同之處在於我只在IE中遇到了問題。

如果您不想玩從源代碼構建AngularJS腳本，只需在angular.js文件中搜索htmlAnchorDirective並將其刪除/註釋掉即可。

我相信這裏有一個更大的問題，應該在AngularJS內核中解決，但我還沒有找到它。

UPDATE：此解決方案現在很可能已過時！你應該嘗試使用最新的AngularJS版本。

來源

2012-09-13 22:54:13

我一直在做deleteUser（$ event，user.id），它似乎工作。可能的問題是將變量排序到您的點擊處理程序。第一個參數可能應該是$ event對象。

來源

2012-09-12 08:56:55 ganaraj

對不起，這似乎不適合我。我只是用'$ event'作爲第一個變量，但不起作用。 Thx爲您的答案！ – Voles

這誠然是一個黑客，但我所做的：

<span class="link" ng-click="deleteUser(user.id)">Delete user</span>

和我的CSS有

span.link { 
    /* style like a link */ 
}

來源

2012-09-12 12:53:17

我也爲我的鏈接分配了一個類（使用Jade和Node.js），但沒有做到這一點。謝謝你的回覆！ – Voles

請讓我們知道什麼結束了工作 - 謝謝！ –

目前我仍然使用'href =「javascript：」'-hack ... – Voles

究竟當您刪除href屬性沒有工作？這正是你應該做的。看到這個搗鼓一個例子： http://jsfiddle.net/terebentina/SXcQN/

來源

2012-09-12 14:01:29

ng-href的空href對我沒有任何幫助。感謝您的回覆！ – Voles

也許你可以提供一個簡化的jsfiddle和/或瀏覽器的細節......或者所有瀏覽器都發生這種情況嗎？ –

<a ng-click="deleteUser(user.id)" href="">Delete user</a>

來源

2012-09-12 14:12:29

同我說的Dan Caragea的答案一樣，空href並不會爲我做伎倆 – Voles

我不相信這種行爲在瀏覽器或案例之間不一致。你可以提供你不工作的生活的例子，很可能在http://jsfiddle.net –

這正是我的問題。左href =「」和所有按預期工作。我不知道爲什麼，但我想我正在期待ng-click的魔法。 – fool4jesus

我使用我的自定義指令來完成此操作。其機制是運行ng-click指令本身。

angular.module('delete', []) 
.directive('buttonDelete', ['$parse', function ($parse) { 
    var confirmFunc = function (scope, element, attr, event, ngClick) { 
     if (! confirm("Are you sure?")) { 
      event.preventDefault(); 
     } 
     else { 
      // Copy from ngEventDirectives initialization. 
      var fn = $parse(ngClick); 
      scope.$apply(function() { 
       fn(scope, {$event:event}); 
      }); 
     } 
    }; 

    return { 
     restrict: 'C', 
     compile: function (element, attr) { 
      var ngClick = attr.ngClick; 
      attr.ngClick = ''; 

      return { 
       pre: function (scope, element, attr) { 
        element.click(function (e) { 
         confirmFunc(scope, element, attr, e, ngClick); 
        }); 
       } 
      }; 
     } 
    }; 
}]);

來源

2012-10-17 09:52:45 noomz

下工作對我來說很大：

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>

來源

2014-02-13 06:05:17 eb80

如果你看一下source code爲a元素指令（這是方芯的一部分），它在前線國家29 - 31 ：

if (!element.attr(href)) { 
    event.preventDefault(); 
}

這意味着Angular已經在解決沒有href的鏈接問題。你仍然唯一的問題是CSS問題。您還可以將指針樣式應用到具有NG-點擊錨，例如：

a[ng-click] { 
    /* Styles for anchors without href but WITH ng-click */ 
    cursor: pointer; 
}

所以，你甚至可以使通過標記有一個微妙的，不同的造型真正的鏈接，然後執行功能的鏈接你的網站更容易獲得。

快樂編碼！

來源

2016-04-13 11:54:44

由於@Justus指出，如果源代碼是這樣的：

if (!element.attr(href)) { 
    event.preventDefault(); 
}

製作element.attr(href)爲空字符串''應該讓你的if條件內，爲!''計算結果爲true。這是@umur的解決方案

來源

2016-08-18 13:19:20 sabithpocker

防止默認的錨定行爲AngularJS

回答

相關問題