AngularJS - 在新标签中打开链接时，通过控制器路由有条件 [英] AngularJS - Open link in new tab when conditionally routing via controller
问题描述
在我的应用程序，我有两个类型的配置文件进行组织。当用户点击一个配置文件名称，我首先需要检查自己是否拥有该组织premium配置文件，如果是这样，路线在该方向上的用户。如果没有premium信息，用户被发送到标准的个人资料。
我这样做使用纳克单击，该发送ID和资源（在这种情况下，组织）的参数给控制器，其中所述的条件进行评估，然后在用户按正确的方向路由。当用户单击正常所有这一切都可以正常工作。
但是，当用户试图打开一个新标签页的链接，右击并选择该选项，新标签与当前网页的网址打开。所以NG-点击控制器打开新标签之前并没有解雇或评估的要求。
我如何通过code改变，使角的进程在打开新标签之前，NG单击请求？或者更广泛地说，我怎么才能让我的用户在新标签中打开其中一个链接，让他们不只是显示在页面上，他们目前对？
HTML
＆LT; DIV NG控制器=ProfileRouter＆GT;
＆LT; DIV NG重复=，在机构单位组织|排序依据：'org.name'＆GT;
＆所述; A HREF =纳克点击=profileCheck（'{{org.id}}，组织）＆GT; {{org.name}}＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
里面ProfileRouter控制器
$ scope.profileCheck =功能（ID，资源）{ $ HTTP（{方法：GET，网址：'/ IdCheck'，则params：{ID：ID}）
.success（功能（数据）{ 变种数= data.hits.found;
如果（计数）{
变种散列= data.hits.hit [0] .ID;
} 如果（资源=='组织'）{
theResource ='大学';
页=概览;
} 如果（计数== 1）{
window.location.href =/+ theResource +/型材/+散+/+页;
}
如果（计数== 0）{
window.location.href =/+资源+/+ ID;
} }）
.error（功能（数据）{
$ scope.data = ||数据无法获取资源;
}）;
}
我知道这是个老问题。但是，我发现了一个解决这个＆功放;在这里张贴它可能会帮助别人。
首先，我创建了一个自定义的指令为右键：
module.directive（'tabRightClick'，['$解析'，函数（$解析）{
返回功能（范围，元素，ATTRS）{
变种FN = $解析（attrs.tabRightClick）;
element.bind（'文本菜单'，函数（事件）{
范围。$应用（函数（）{
//事件preventDefault（）;
FN（范围，{$事件：事件}）;
}）;
}）;
};
}]）;
然后应用这个指令，因为在HTML文件中的一个属性，并调用所调用的同样的方法NG-点击：
＆LT; DIV NG控制器=ProfileRouter＆GT;
＆LT; DIV NG重复=，在机构单位组织|排序依据：'org.name'＆GT;
＆LT; A HREF ={{locationPath}}NG点击=profileCheck（'{{org.id}}'，'组织'）选项卡中，单击鼠标右键=profileCheck（{{} org.id }，组织）＆GT; {{org.name}}＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
下面 locationPath 是 $范围约束变量，这就需要我们在控制器来实现。
其值应在基于各种条件profileCheck功能被更新。
$ scope.profileCheck =功能（ID，资源）{ $ HTTP（{方法：GET，网址：'/ IdCheck'，则params：{ID：ID}）
.success（功能（数据）{ 变种数= data.hits.found;
如果（计数）{
变种散列= data.hits.hit [0] .ID;
} 如果（资源=='组织'）{
theResource ='大学';
页=概览;
} 如果（计数== 1）{
window.location.href =/+ theResource +/型材/+散+/+页;
$ scope.locationPath =/+ theResource +/型材/+散+/+页;
}
如果（计数== 0）{
window.location.href =/+资源+/+ ID;
$ scope.locationPath =/+资源+/+ ID;
} }）
.error（功能（数据）{
$ 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屋！
