25

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

我尝试了以下可能性

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

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

  3. 起作用的是我在 GitHub 上发现的关于 unintended reload的 hack 。

这就是我现在的做法：

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

问题

防止链接更改 URL 的“干净”方法是什么？

4

9 回答 9

18 
<a ng-click="deleteUser(user.id)" href="">Delete user</a>
于 2012-09-12T14:12:29.120 回答
5

如果您查看element 指令（它是 Angular 核心的一部分）的源代码，它在第 29 - 31 行声明：a

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

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

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

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

快乐编码！

于 2016-04-13T11:54:44.780 回答
3

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

于 2012-09-12T14:01:29.023 回答
3

真正的问题在于a 指令

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

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

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

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

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

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

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

于 2012-09-13T22:54:13.613 回答
2

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

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

制作element.attr(href)为空字符串 ''应该让您进入if条件，!''评估为true. 这是@umur的解决方案

于 2016-08-18T13:19:20.870 回答
1

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

于 2012-09-12T08:56:55.750 回答
1

我使用我的自定义指令来完成此操作。它的机制是操作 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-17T09:52:45.733 回答
0

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

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

在我的CSS中有

span.link {
    /* style like a link */
}
于 2012-09-12T12:53:17.227 回答
0

以下对我很有用：

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>
于 2014-02-13T06:05:17.710 回答