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

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

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


当前回答

更新:我已经改变了我对这个解决方案的想法。经过更多的开发和时间的努力,我相信更好的解决这个问题的方法是:

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

然后更新你的css有一个额外的规则:

a[ng-click]{
    cursor: pointer;
}

它更简单,提供完全相同的功能,效率更高。希望这对将来寻找这个解决方案的人有所帮助。


以下是我之前的解决方案,我把它放在这里只是为了遗留的目的:

如果你经常遇到这个问题,一个简单的指令可以解决这个问题:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

它检查所有锚标记(<a></a>),看看它们的href属性是否为空字符串("")或散列('#'),或者存在ng-click赋值。如果发现其中任何一种情况,它将捕获事件并防止默认行为。

唯一的缺点是它为所有锚标记运行这个指令。因此,如果页面上有很多锚标记,而你只想阻止其中一小部分的默认行为,那么这个指令就不是很有效。然而,我几乎总是想要preventDefault,所以我在我的AngularJS应用程序中都使用这个指令。

其他回答

所以阅读这些答案,@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应用程序。

您可以执行以下操作

1.从锚(a)标签中删除href属性

2.将css中的指针指针设置为ng click元素

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

我需要存在href属性的值退化(当js被关闭),所以我不能使用空href属性(或“#”),但上面的代码没有为我工作,因为我需要一个事件(e)变量。我创建了自己的指令:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

在HTML中:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

更新:我已经改变了我对这个解决方案的想法。经过更多的开发和时间的努力,我相信更好的解决这个问题的方法是:

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

然后更新你的css有一个额外的规则:

a[ng-click]{
    cursor: pointer;
}

它更简单,提供完全相同的功能,效率更高。希望这对将来寻找这个解决方案的人有所帮助。


以下是我之前的解决方案,我把它放在这里只是为了遗留的目的:

如果你经常遇到这个问题,一个简单的指令可以解决这个问题:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

它检查所有锚标记(<a></a>),看看它们的href属性是否为空字符串("")或散列('#'),或者存在ng-click赋值。如果发现其中任何一种情况,它将捕获事件并防止默认行为。

唯一的缺点是它为所有锚标记运行这个指令。因此,如果页面上有很多锚标记,而你只想阻止其中一小部分的默认行为,那么这个指令就不是很有效。然而,我几乎总是想要preventDefault,所以我在我的AngularJS应用程序中都使用这个指令。

借用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();
                    }
                })
            }
        };
    }
])