Question

当用户点击链接时，我想在控制器内的函数中执行一些代码。但我想阻止URL更改。

我尝试了以下可能性

删除了href-attribute。 无效，仍将网址更改为“/'
在我的deleteUser（）函数中尝试了ng-click='deleteUser(user.id, $event)'和$event.preventDefault()。 没用。
我在GitHub上发现的关于unintended reload的黑客行为是什么。

我现在就是这样做的：

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

问题

防止链接更改网址的“清理”方法是什么？

Answer 1

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

Answer 2

如果你查看a元素指令的source code（它是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

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

Answer 4

真正的问题出在a directive

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

如果您查看代码中的注释，似乎可以解决IE的一些问题。

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

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

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

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

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

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

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

<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>

防止默认锚行为AngularJS

9 个答案: