AngularJS - 通过控制器有条件路由时在新选项卡中打开链接答案

【问题标题】：AngularJS - Open link in new tab when conditionally routing via controllerAngularJS - 通过控制器有条件路由时在新选项卡中打开链接
【发布时间】：2014-03-27 09:17:08
【问题描述】：

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

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

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

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

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>

在 ProfileRouter 控制器内部

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

【问题讨论】：

标签： javascript angularjs tabs angularjs-ng-click

【解决方案1】：

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

首先我为右键创建了一个自定义指令：

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

然后将该指令作为 HTML 文件中的属性应用，并调用在 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>

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

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

希望对你有帮助。

【讨论】：