假設(shè)我有一個(gè)錨標(biāo)記，例如<a href="#" ng-click="do()">Click</a>如何防止瀏覽器導(dǎo)航到AngularJS中的＃？
3 回答
手掌心
TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊
此后，我改變了主意。經(jīng)過更多的開發(fā)和花時(shí)間在此上，我相信針對(duì)此問題的更好解決方案是執(zhí)行以下操作：
<a ng-click="myFunction()">Click Here</a>
然后更新您css的規(guī)則，以執(zhí)行以下操作：
a[ng-click]{
cursor: pointer;
}
它更加簡單，并提供完全相同的功能，并且效率更高。希望對(duì)將來尋找該解決方案的其他人有所幫助。
以下是我以前的解決方案，僅出于遺留目的而留在這里：
如果您經(jīng)常遇到此問題，則可以通過以下簡單指令來解決此問題：
app.directive('a', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
elem.on('click', function(e){
e.preventDefault();
});
}
}
};
});
它檢查所有錨標(biāo)記（<a></a>），以查看其錨href屬性是否為空字符串（""）或哈希（'#'）或是否有ng-click分配。如果發(fā)現(xiàn)這些條件中的任何一個(gè)，它將捕獲事件并阻止默認(rèn)行為。
唯一的缺點(diǎn)是它為所有錨標(biāo)記運(yùn)行此指令。因此，如果頁面上有很多錨標(biāo)記，而您只想防止其中的少量錨標(biāo)記的默認(rèn)行為，那么此指令的效率就不是很高。但是，我?guī)缀蹩偸窍胍猵reventDefault，因此我在AngularJS應(yīng)用程序中全部使用了此指令。
繁星淼淼
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊
根據(jù)ngHref的文檔，您應(yīng)該可以省略 href或執(zhí)行href =“”。
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
我更喜歡對(duì)此類事情使用指令。這是一個(gè)例子
<a href="#" ng-click="do()" eat-click>Click Me</a>
和指令代碼為eat-click：
module.directive('eatClick', function() {
return function(scope, element, attrs) {
$(element).click(function(event) {
event.preventDefault();
});
}
})
現(xiàn)在，您可以將eat-click屬性添加到任何元素，它將preventDefault()自動(dòng)進(jìn)行編輯。
好處：
您不必將丑陋的$event對(duì)象傳遞給do()函數(shù)。
您的控制器更易于單元測(cè)試，因?yàn)樗恍枰娓?event對(duì)象
查
- 3 回答
- 0 關(guān)注
- 589 瀏覽
添加回答
舉報(bào)
0/150
提交
取消