Question

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

我是使用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";
    });  
}

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

希望它有所帮助。

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

1 个答案: