防止鏈接的默認行為

Question

如何防止鏈接自動將我帶到下一頁？ 基本上，我有一個鏈接列表，但首先，我想在遵循鏈接之前執行檢查。

例如...

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

我不知道的是“check_link”中的javascript代碼，如果檢查失敗，將阻止用戶關注鏈接。

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')來更改頁面。

這里有完整的$ location文檔： 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”類。