防止默认的锚定行为AngularJS

当用户点击链接时，我想在控制器内部的函数中执行一些代码。但我想阻止URL的更改。防止默认的锚定行为AngularJS

我尝试了以下可能性

删除了的href属性。 没有工作，仍然改变URL以 '/'
在我deleteUser尝试ng-click='deleteUser(user.id, $event)'和$event.preventDefault()（） - 功能。 没有工作。
什么工作是我在GitHub上发现的关于unintended reload的黑客攻击。

这是我要做的事现在：

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

问题

什么是the'clean”的方法，以防止改变URL的链接？

来源

2012-09-12 Voles

为什么不使用href =“＃”？ –

或者只是'''href =“”'''？ – opyate

+1给opyate，'href =“”'解决了我的问题。 'href =“＃”'重新路由到'＃/'，以便在点击时重定向。 –

真正的问题是在a directive

这是正确的，每<a></a>元素实际上是一个AngularJS指令。

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

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

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

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

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

UPDATE：此解决方案现在很可能已过时！你应该尝试使用最新的AngularJS版本。

来源

2012-09-13 22:54:13

我一直在做deleteUser（$ event，user.id），它似乎工作。可能的问题是将变量排序到您的点击处理程序。第一个参数可能应该是$ event对象。

来源

2012-09-12 08:56:55 ganaraj

对不起，这似乎不适合我。我只是用'$ event'作为第一个变量，但不起作用。 Thx为您的答案！ – Voles

这诚然是一个黑客，但我所做的：

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

和我的CSS有

span.link { 
    /* style like a link */ 
}

来源

2012-09-12 12:53:17

我也为我的链接分配了一个类（使用Jade和Node.js），但没有做到这一点。谢谢你的回复！ – Voles

请让我们知道什么结束了工作 - 谢谢！ –

目前我仍然使用'href =“javascript：”'-hack ... – Voles

究竟当您删除href属性没有工作？这正是你应该做的。看到这个捣鼓一个例子： http://jsfiddle.net/terebentina/SXcQN/

来源

2012-09-12 14:01:29

ng-href的空href对我没有任何帮助。感谢您的回复！ – Voles

也许你可以提供一个简化的jsfiddle和/或浏览器的细节......或者所有浏览器都发生这种情况吗？ –

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

来源

2012-09-12 14:12:29

同我说的Dan Caragea的答案一样，空href并不会为我做伎俩 – Voles

我不相信这种行为在浏览器或案例之间不一致。你可以提供你不工作的生活的例子，很可能在http://jsfiddle.net –

这正是我的问题。左href =“”和所有按预期工作。我不知道为什么，但我想我正在期待ng-click的魔法。 – fool4jesus

我使用我的自定义指令来完成此操作。其机制是运行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-17 09:52:45 noomz

下工作对我来说很大：

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>

来源

2014-02-13 06:05:17 eb80

如果你看一下source code为a元素指令（这是方芯的一部分），它在前线国家29 - 31 ：

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

这意味着Angular已经在解决没有href的链接问题。你仍然唯一的问题是CSS问题。您还可以将指针样式应用到具有NG-点击锚，例如：

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

所以，你甚至可以使通过标记有一个微妙的，不同的造型真正的链接，然后执行功能的链接你的网站更容易获得。

快乐编码！

来源

2016-04-13 11:54:44

由于@Justus指出，如果源代码是这样的：

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

制作element.attr(href)为空字符串''应该让你的if条件内，为!''计算结果为true。这是@umur的解决方案

来源

2016-08-18 13:19:20 sabithpocker

防止默认的锚定行为AngularJS

回答

相关问题