Question

我有一个应该调用$ scope-function的链接，这会导致显示另一个视图。

但我也希望用户可以右键点击该链接并将其打开到新窗口或将其添加为书签。

所以这是（非工作）html：

<a ng-click="OpenSubsite(singleitem.Id)" href="{{GetUrl(singleItem.Id)}}">{{singleItem.Title}}</a>

控制器包含以下代码：

$scope.OpenSubSite=function(id) {
  $scope.LoadItem(id);
}
$scope.GetUrl=function(id) {
  return "showitem.html#id="+id;
}

两种方法都可以正常工作。只是没有我想要的组合。我希望在点击该网址时调用“OpenSubSite()”，但在执行右键点击（“在新标签中打开”或“添加到收藏夹”）时，应使用“GetUrl()” - 返回值代替。

但是使用此代码，GetUrl（）的URL始终打开，即使在左侧鼠标按钮单击，

有没有办法让这种情况发生？

Answer 1

您必须在触发ng-click时阻止默认操作。您可以通过传递$event object of the ng-click directive：

来实现

<a ng-click="OpenSubsite($event, singleitem.Id)">..</a>

然后在控制器中：

$scope.OpenSubSite = function(ev, id) {
    ev.preventDefault(); // prevent it opens default

    $scope.LoadItem(id);

    return false;
}

Answer 2

您需要阻止默认

ng-click="OpenSubsite($event,singleitem.Id)"

$scope.OpenSubSite=function($event,id) {
   $event.preventDefault()
   $scope.LoadItem(id);
}

Answer 3

只需添加onclick =＆＃34;返回false;＆＃34;

html将是

<a ng-click="OpenSubsite(singleitem.Id)" onclick="return false;" href="{{GetUrl(singleItem.Id)}}">{{singleItem.Title}}</a>

这会阻止点击重定向到GetUrl，但是如果你在新标签页中使用open，它将会起作用

Answer 4

另一种答案：您可以在ng-method中获取$event并确定点击了哪个按钮。之后，您可以将任何方法分配给相关按钮，如下所示：

＆＃13;

var app = angular.module('app', []).controller('controller', function ($scope, $http) {

    /*
      other methods like LoadItem
    */
    $scope.LoadItem = function(id) {
      //some stuf here
    }
    $scope.OpenSubSite=function(id) {
      $scope.LoadItem(id);
    };
    $scope.GetUrl=function(id) {
      return "showitem.html#id="+id;
    };
    $scope.handleClick = function(evt, id) {
      evt.preventDefault();
      switch(evt.which) {
        case 1:
            alert("left click");
            $scope.OpenSubSite(id);
            // this is left click
            break;
        case 3:
            alert("right click");
            $scope.GetUrl(id);
            // this is right click
            break;
        default:
            break;
      }
    };
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="controller">
    <a href="#" ng-mousedown="handleClick($event, 1)">link</a>
  </div>
</div>

＆＃13;

使用ng参与ng-click

4 个答案: