防止默认锚行为AngularJS

Question

当用户点击一个链接时，我想在控制器内部的一个函数中执行一些代码。但我想防止 URL 发生变化。

我尝试了以下可能性

1. 删除了 href 属性。 没用，还是把url改成'/'

2. 在我的 deleteUser() 函数中尝试了 ng-click='deleteUser(user.id, $event)' 和 $event.preventDefault()。 没用。

3. 我在 GitHub 上发现了一个关于 unintended reload 的 hack。

这就是我现在的做法：

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

问题

什么是'clean'方法来防止链接改变URL？

Answer 1

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

Answer 2

如果您查看 source code 中的 a 元素指令（它是 Angular 核心的一部分），它会在第 29 - 31 行声明：

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

这意味着 Angular 已经在解决没有 href 的链接问题。您仍然存在的唯一问题是css问题。您仍然可以将指针样式应​​用于具有 ng-clicks 的锚点，例如：

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

因此，您甚至可以通过使用微妙的、与执行功能的链接不同的样式标记真实链接来使您的网站更易于访问。

编码愉快！

Answer 3

真正的问题在于a directive

没错，每个<a></a> 元素实际上都是一个AngularJS 指令。

如果您查看代码中的 cmets，它似乎修复了 IE 的一些问题。

但是当我刚刚从 AngularJS 核心代码中删除指令时，对我来说一切都很好。

我遇到了和你一样的问题，并尝试了所有其他解决方案。不同的是我只在 IE 中遇到了问题。

如果您不想从源代码构建 AngularJS 脚本，只需在 angular.js 文件中搜索 htmlAnchorDirective 并将其删除/注释掉即可。

我认为这里有一个更大的问题应该在 AngularJS 核心中解决，但我还没有找到。

更新：这个解决方案现在很可能已经过时了！您应该尝试使用最新的 AngularJS 版本。

Answer 4

当您删除 href 属性时，究竟是什么不起作用？ 这正是你应该做的。看这个小提琴的例子： http://jsfiddle.net/terebentina/SXcQN/

Answer 5

正如@Justus 指出的，如果源代码是这样的：

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

将element.attr(href) 设为空字符串 '' 应该让您进入if 条件，因为!'' 的计算结果为true。这是@umur的解决方案

Answer 6

我一直在做 deleteUser($event,user.id) 并且它似乎有效。一个可能的问题是变量到您的点击处理程序的顺序。第一个参数可能应该是 $event 对象。

Answer 7

我使用我的自定义指令来完成此操作。它的机制是自己操作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);
                    });
                }
            };
        }
    };
}]);

Answer 8

这无疑是一个 hack，但我做到了：

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

在我的 css 中有

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

Answer 9

以下内容对我很有用：

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