angularjs – 如何防止锚标签上的默认?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何防止锚标签上的默认?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有一个锚标签,例如
<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();
                });
            }
        }
   };
});

它检查所有锚标记()以查看其href属性是空字符串(“”)还是散列(‘#’)还是ng-click分配。如果它发现任何这些条件,它捕获该事件并防止默认行为。

唯一的缺点是它为所有锚标签运行此指令。所以如果你在页面上有很多锚标签,而你只想防止少数的默认行为,那么这个指令是不是很有效率。然而,我几乎总是想防止默认,所以我在我的AngularJS应用程序中使用这个指令。

猜你在找的Angularjs相关文章