假设我有一个锚标记,比如

<a href="#" ng-click="do()">Click</a>

如何防止浏览器在AngularJS中导航到# ?


当前回答

或者如果你需要内联,那么你可以这样做:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

其他回答

如果仍然相关:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

你可以将$event对象传递给你的方法,并在它上面调用$event. preventdefault(),这样默认的处理就不会发生:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

借用tennisgent的答案。我喜欢你不需要创建一个自定义指令来添加所有的链接。然而,我不能让他在IE8中工作。下面是最终对我有用的方法(使用angular 1.0.6)。

注意,'bind'允许你使用angular提供的jqLite,所以不需要用完整的jQuery来包装。还需要stoppropagation方法。

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

我认为:

<a ng-click="do()">Click</a>

因为根据文档,你应该可以离开href,然后Angular会为你处理防止的默认值!

整个这个防止默认的事情一直困扰着我,所以我创建了一个JSFiddle 说明了Angular在何时何地阻止了默认。

JSFiddle使用的是Angular的a指令——所以应该是完全一样的。您可以在这里看到源代码:一个标记源代码

我希望这将有助于澄清一些。

我本想把这个文档发布到ngHref上,但因为我的名声,我不能。

所以阅读这些答案,@Chris仍然有最“正确”的答案,我想,但它有一个问题,它没有显示“指针”....

所以这里有两种方法来解决这个问题,而不需要添加游标:指针样式:

使用javascript:void(0)代替#: <a href="javascript:void(0)" ng-click="doSomething()“>做< / > 在ng-click指令中使用$event.preventDefault()(这样你就不会用dom相关的引用来破坏你的控制器): <a href="#dontGoHere" ng-click="doSomething();$ event.preventDefault ()“>做< / >

就我个人而言,我更喜欢前者而不是后者。void(0)还有这里讨论的其他好处。在那个链接中也有关于“不显眼的JavaScript”的讨论,这是最近才出现的,并不一定直接适用于angular应用程序。