Javascript 防止默认锚点行为 AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12384058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent default anchor behaviour AngularJS
提问by ndequeker
When the user clicks a link, I want to execute some code in a function inside the controller. But I want to prevent that the URL changes.
当用户单击链接时，我想在控制器内的函数中执行一些代码。但我想防止 URL 更改。
I tried the following possibilities
我尝试了以下可能性
Removed the href-attribute. Didn't work, still changes the url to '/'
Tried
ng-click='deleteUser(user.id, $event)'and$event.preventDefault()in my deleteUser()-function. Didn't work.What did work is a hack I've found on GitHub about an unintended reload.
删除了 href 属性。没有用，仍然将 url 更改为“/”
试图
ng-click='deleteUser(user.id, $event)'和$event.preventDefault()我deleteUser（） -功能。没用。有效的是我在 GitHub 上发现的一个关于意外 reload的黑客攻击。
This is how I do it now:
这就是我现在的做法：
<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a>
Question
题
What is the'clean' method to prevent a link from changing the URL?
防止链接更改 URL 的“干净”方法是什么？
采纳答案by Haralan Dobrev
The real problem is in the a directive
真正的问题在于指令
That's right, every <a></a>element is actually an AngularJS directive.
没错，每个<a></a>元素实际上都是一个 AngularJS 指令。
It seems to fix some issues with IE if you look the comments in the code.
如果您查看代码中的注释，似乎可以解决 IE 的一些问题。
But everything for me is working great when I just removed the directive from the AngularJS core code.
但是当我刚刚从 AngularJS 核心代码中删除指令时，一切对我来说都很好。
I was having the same problem as you did and tried all of the other solutions. The difference is that I had the problem only in IE.
我遇到了和你一样的问题，并尝试了所有其他解决方案。不同之处在于我只在 IE 中遇到了问题。
If you don't want to play with building the AngularJS script from source, just search for htmlAnchorDirective in the angular.js file and remove/comment it out.
如果您不想从源代码构建 AngularJS 脚本，只需在 angular.js 文件中搜索 htmlAnchorDirective 并将其删除/注释掉即可。
I believe there is a bigger problem here which should be addressed in the AngularJS core, but I haven't found it yet.
我相信这里有一个更大的问题应该在 AngularJS 核心中解决，但我还没有找到它。
UPDATE: This solution is most probably outdated now! You should try using the latest AngularJS version.
更新：这个解决方案现在很可能已经过时了！您应该尝试使用最新的 AngularJS 版本。
回答by Umur Kontac?
<a ng-click="deleteUser(user.id)" href="">Delete user</a>
回答by Justus Romijn
If you look at the source codefor the aelement directive (which is a part of the Angular core), it states at line 29 - 31:
如果你看一下源代码的a元素指令（这是方芯的一部分），它规定在第29行- 31：
if (!element.attr(href)) {
event.preventDefault();
}
Which means Angular already is solving the issue of links without a href. The only issue you still have is the css problem. You can still apply the pointer style to anchors that have ng-clicks, e.g.:
这意味着 Angular 已经在解决没有 href 的链接问题。您仍然遇到的唯一问题是 css 问题。您仍然可以将指针样式应用于具有 ng-clicks 的锚点，例如：
a[ng-click] {
/* Styles for anchors without href but WITH ng-click */
cursor: pointer;
}
So, you could even make your site more accessible by marking real links with a subtle, different styling then links that perform functions.
因此，您甚至可以通过使用微妙的、不同的样式标记真实链接，然后标记执行功能的链接，从而使您的站点更易于访问。
Happy coding!
快乐编码！
回答by Dan Caragea
What exactly didn't work when you removed the href attribute? That's exactly what you should do. See this fiddle for an example: http://jsfiddle.net/terebentina/SXcQN/
当您删除 href 属性时，究竟是什么不起作用？这正是你应该做的。以这个小提琴为例：http: //jsfiddle.net/terebentina/SXcQN/
回答by sabithpocker
As @Justus pointed out, if the source code is like:
正如@Justus 指出的，如果源代码是这样的：
if (!element.attr(href)) {
event.preventDefault();
}
Making element.attr(href)as null string''should get you inside the ifcondition, as !''evaluates to true. That is the solution by @umur
制作element.attr(href)为空字符串''应该让你进入if条件，因为!''评估为true. 这是@umur的解决方案
回答by ganaraj
I have always been doing deleteUser($event,user.id) and it seemed to work. A possible problem would be the ordering of the variables to your click handler. The first argument should probably be the $event object.
我一直在做 deleteUser($event,user.id) 并且它似乎有效。一个可能的问题是点击处理程序的变量排序。第一个参数应该是 $event 对象。
回答by noomz
I use my custom directive to accomplish this. Its mechanism is to operate ng-click directive itself.
我使用我的自定义指令来完成这个。它的机制是运行 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);
});
}
};
}
};
}]);
回答by eb80
The following worked great for me:
以下对我很有用：
<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>
回答by Roy Truelove
This is admittedly a hack, but I did:
这无疑是一个黑客，但我做到了：
<span class="link" ng-click="deleteUser(user.id)">Delete user</span>
and in my css had
在我的 css 中有
span.link {
/* style like a link */
}
