Use href with ng-click

Question

I have a link that should call a $scope-function which causes another view to bei displayed.

But I also want that the User can rightclick onto that Link and open it into a new window or bookmark this.

So this is the (non-working) html:

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

The controller contains the following Code:

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

Both methods alone work fine. Just not in the combination I want. I want the "OpenSubSite()" to be called when clicking onto that URL but when doing a rightclick ("open in new tab" or "add to favorites") the "GetUrl()"-Returnvalue should be used instead.

But with this code, the URL from GetUrl() is always opened even on left Mousebutton click,

Is there a way to make this happen?

consider using the directive in the answer of this question http://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js — Gustavo Gabriel, Sep 20 '16 at 12:55
I guess this does not work. I want no custom RMB-action, but "just" the URL to be submitted to the browser — Ole Albers, Sep 20 '16 at 12:58

score 2 · Accepted Answer · answered Sep 20 '16 at 13:00

2

You have to prevent the default action when you trigger the ng-click. You can do that by passing the $event object of the ng-click directive:

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

Then in the controller:

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

    $scope.LoadItem(id);

    return false;
}

answered Sep 20 '16 at 13:00

devqon

13,818
2
30
45

Is the "return false" also needed in that example? – Ole Albers Sep 20 '16 at 13:08
1

Don't think its required, but it was always used in the past :) Maybe for oldtimers like IE – devqon Sep 20 '16 at 13:11

score 1 · Answer 2 · answered Sep 20 '16 at 13:01

1

you need to prevent the default

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

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

answered Sep 20 '16 at 13:01

charlietfl

170,828
13
121
150

score 1 · Answer 3 · answered Sep 20 '16 at 13:03

Just add onclick="return false;"

the html will be

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

this will prevent the clicking to redirect to GetUrl but it will work in case you use open in new tab

Bahadir Tasdemir · Answer 4 · 2016-09-20T13:16:26.373

An alternative answer: You can get $event in ng-method and determine which button is clicked. After that, you can assign any method to related button like this:

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;
      }
    };
    
});

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

Use href with ng-click

4 Answers4