Question

如何阻止链接自动转到下一页？基本上，我有一个链接列表，但首先，我想在跟踪链接之前执行检查。

例如......

<tr ng-repeat= "match in matches">
    <td>
        <a href= {{match.link}} ng-click= "check_link(match.link)"> Click me </a>
    </td>
</tr>

我不知道的是内部的javascript代码＆＃34; check_link＆＃34;这将阻止用户在检查失败时跟踪链接。

Answer 1

我个人会在你的应用程序中创建一个指令，它可以轻松地阻止链接的默认行为。这允许您在希望阻止链接正常运行时重复使用此代码。

示例：单击时，此链接应调用方法sayHello（）。它不会链接到google.com

<a href="http://google.com" ng-click="sayHello()" stop-link>Say Hello</a>

以下是该指令的代码：

.directive('stopLink', function() {
  return {
    restrict: "A",
    link: function($scope, ele, attrs) {
      ele.click(function(e){
        e.preventDefault();
      });
    }
  }
});

此处提供了完整的工作示例：http://plnkr.co/edit/i5ZHDiwhnSVLkf59LxuU

这样，您可以在sayHello（）中执行任何必要的检查，然后根据需要使用$location重定向用户。您可能希望使用$location.path('/blah')或$location.url('http://google.com')来更改网页。

此处的完整$位置文档：https://code.angularjs.org/1.2.16/docs/api/ng/service/$location

Answer 2

<a href="{{match.link}}" ng-click="check_link(match.link, $event)">Click me</a>

您必须将click事件（可用作$ event）传递给check_link函数。然后，如果您决定阻止它跟随，请在其上调用preventDefault（）。

$scope.check_link = function (yourParam, event) {
  // your code
  if (your_condition) event.preventDefault();
  // your code
};

Answer 3

您的Angular函数应该同时处理匹配和位置重定向。使用按钮标记而不是锚点会删除自动链接跟随问题。

<tr ng-repeat= "match in matches">
    <td>
        <button type='button' ng-click= "check_link(match.link)"> Click me </button>
    </td>
</tr>

在您的控制器中：

$scope.check_link = function(whatToCheck){
    if(checksOut){
        $location.path(whatToCheck);
    }
};

如果您希望将其显示为链接，请考虑使用Bootstrap并为其提供一个“btn btn-link＆＃39;”。

防止链接的默认行为

3 个答案: