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

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

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


当前回答

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

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

其他回答

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

我需要存在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>
/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

如果仍然相关:

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