AngularJS - 通过控制器有条件地路由时在新选项卡中打开链接 [英] AngularJS - Open link in new tab when conditionally routing via controller

问题描述

在我的应用中，我有两种类型的组织配置文件.当用户单击个人资料名称时，我首先需要检查我是否有该组织的高级个人资料，如果有，则将用户路由到该方向.如果没有高级配置文件，则将用户发送到标准配置文件.

我使用 ng-click 执行此操作，它将 id 和资源(在本例中为组织)参数发送到控制器，在控制器中评估条件，然后将用户路由到正确的方向.当用户正常点击时，所有这些都可以正常工作.

但是，当用户尝试在新标签页中打开链接时，通过右键单击并选择该选项，新标签页会打开并显示当前页面的 url.所以 ng-click 和控制器在打开新标签之前没有触发或评估请求.

如何通过代码进行更改，以便 Angular 在打开新选项卡之前处理 ng-click 请求?或者更广泛地说，我如何允许我的用户在新选项卡中打开这些链接之一，以便他们不只是显示他们当前所在的页面?

HTML

<div ng-repeat="org 中的组织 | orderBy:'org.name'"><a href="" ng-click="profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a>

ProfileRouter 控制器内部

$scope.profileCheck = function (id, resource) {$http({method: 'GET', url:'/IdCheck', params:{'id': id}).成功(功能(数据){var count = data.hits.found;如果(计数){var hash = data.hits.hit[0].id;}如果(资源=='组织'){theResource = '大学';page = '概览';}如果(计数== 1){window.location.href = "/" + theResource + "/profile/" + hash + "/" + page;}如果(计数== 0){window.location.href = "/" + 资源 + "/" + id;}}).错误(功能(数据){$scope.data = 数据 ||"无法获取资源";});}

解决方案

我知道这是一个老问题.但是我找到了解决方案&将其发布在这里可能对其他人有所帮助.

首先，我为右键单击创建了一个自定义指令:

module.directive('tabRightClick',['$parse', function($parse) {返回函数(范围，元素，属性){var fn = $parse(attrs.tabRightClick);element.bind('contextmenu', function(event) {范围.$应用(函数(){//event.preventDefault();fn(范围, {$event:event});});});};}]);

然后将此指令作为 HTML 文件中的属性应用并调用在 ng-click 上调用的相同方法:

<div ng-repeat="org 中的组织 | orderBy:'org.name'"><a href="{{locationPath}}" ng-click="profileCheck( '{{ org.id }}', 'organisation' )" tab-right-click="profileCheck( '{{ org.id }}', '组织')">{{ org.name }}</a>

这里的locationPath是一个$scope绑定变量，我们需要在控制器中实现.应根据各种条件在 profileCheck 函数中更新其值.

$scope.profileCheck = function (id, resource) {$http({method: 'GET', url:'/IdCheck', params:{'id': id}).成功(功能(数据){var count = data.hits.found;如果(计数){var hash = data.hits.hit[0].id;}如果(资源=='组织'){theResource = '大学';page = '概览';}如果(计数== 1){window.location.href = "/" + theResource + "/profile/" + hash + "/" + page;$scope.locationPath = "/" + theResource + "/profile/" + hash + "/" + page;}如果(计数== 0){window.location.href = "/" + 资源 + "/" + id;$scope.locationPath = "/" + 资源 + "/" + id;}}).错误(功能(数据){$scope.data = 数据 ||"无法获取资源";});}

希望对你有帮助.

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

解决方案

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.

这篇关于AngularJS - 通过控制器有条件地路由时在新选项卡中打开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！