AngularJS - Open link in new tab when conditionally routing via controller

Question

In my app, I have two types of profile for organisations. When a user click on a profile name, I first need to check whether I have a premium profile for that organisation, and if so, route the user in that direction. If there is no premium profile, the user is sent to the standard profile.

I'm doing this using ng-click, which send id and a resource (in this case, organisation) parameters to a controller, where the conditions are evaluated and then the user is routed in the correct direction. All of this works correctly when a user clicks as normal.

However, when a user tries to open the link in a new tab, by right clicking and selecting that option, the new tab opens with the url of the current page. So the ng-click and controller has not fired or evaluated the request before opening the new tab.

How can I change by code so that Angular processes the ng-click request before opening the new tab? Or more broadly, how can I allow my users to open one of these links in a new tab so that they are not just displayed the page they are currently on?

HTML

<div ng-controller="ProfileRouter">
        <div ng-repeat="org in orgs | orderBy:'org.name'">
            <a href="" ng-click="profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a>
        </div>
</div>

Inside ProfileRouter controller

$scope.profileCheck = function (id, resource) {

    $http({method: 'GET', url:'/IdCheck', params:{'id': id})
    .success(function(data) {

        var count = data.hits.found;
        if (count) {
            var hash = data.hits.hit[0].id;
        }

       if (resource == 'organisation') {
            theResource = 'universities';
            page = 'overview';
        }

        if (count == 1) {
            window.location.href = "/" + theResource + "/profile/" + hash + "/" + page;
        }
        if (count == 0) {
            window.location.href = "/" + resource + "/" + id;  
        }

     })
    .error(function(data) {
        $scope.data = data || "Can't get resource";
    });  
}

Answer 1

I know this is an old question. But I found out a solution to this & posting it here might help someone else.

First of all I have created a custom directive for right click:

module.directive('tabRightClick',['$parse', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.tabRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
    //            event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
}]);

Then applied this directive as an attribute in the HTML file and call the same method that is being called on ng-click:

<div ng-controller="ProfileRouter">
        <div ng-repeat="org in orgs | orderBy:'org.name'">
            <a href="{{locationPath}}" ng-click="profileCheck( '{{ org.id }}', 'organisation' )" tab-right-click= "profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a>
        </div>
</div>

Here locationPath is a $scope bound variable, which we need to implement in the controller. Its value should be updated in the profileCheck function based on the various conditions.

$scope.profileCheck = function (id, resource) {

    $http({method: 'GET', url:'/IdCheck', params:{'id': id})
    .success(function(data) {

        var count = data.hits.found;
        if (count) {
            var hash = data.hits.hit[0].id;
        }

       if (resource == 'organisation') {
            theResource = 'universities';
            page = 'overview';
        }

        if (count == 1) {
            window.location.href = "/" + theResource + "/profile/" + hash + "/" + page;
            $scope.locationPath = "/" + theResource + "/profile/" + hash + "/" + page;
        }
        if (count == 0) {
            window.location.href = "/" + resource + "/" + id;  
            $scope.locationPath = "/" + resource + "/" + id;
        }

     })
    .error(function(data) {
        $scope.data = data || "Can't get resource";
    });  
}

Hope it's helpful.