[英]AngularJs - Open url in new tab
I have an application with a public page and an admin page. 我有一个公共页面和管理页面的应用程序。 I would like open the admin page in a new tab after login.
我想在登录后在新标签页中打开管理页面。 I've tried this, after the login was successful, but to no effect.
我在登录成功后尝试了这一点,但没有效果。 The public page (where the login is) is just being reloaded:
正在重新加载公共页面(登录的位置):
var url = $state.href('/admin/overview');
$window.open(url, '_blank');
Any tips would be appreciated. 任何提示将不胜感激。 Thank you.
谢谢。
Here is a working JSFiddle , you have to inject $window
before you can use it: 这是一个有效的JSFiddle ,你必须先注入
$window
才能使用它:
JS: JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', '$window', function ($scope, $window) {
$scope.redirectToGoogle = function () {
$window.open('https://www.google.com', '_blank');
};
}]);
HTML: HTML:
<div ng-app="myApp" ng-controller="dummy">
<a ng-href="" ng-click="redirectToGoogle()">Hello</a>
</div>
A simple method to open link in new tab, 在新标签中打开链接的简单方法,
<a href="{{details.website}}" ng-click="openNewTab(details.website)">
{{details.website}}
</a>
$scope.openNewTab = function (url)
{
$window.open(url, '_blank');
};
Before using it you should inject $window
in your controller. 在使用之前,您应该在控制器中注入
$window
。
You can have a directive to do this for you. 你可以有一个指令来为你做这件事。
directives.redirect = function ($location, $window, $rootScope) { return { link: function (scope, element, attrs) { element.on("click", function () { if (!attrs.newwindow || attrs.newwindow == false) { $location.path(attrs.redirect); scope.$apply(); } else { var baseUrl = $location.$$absUrl.toString().substring(0, decodeURIComponent($location.$$absUrl).toString().indexOf($location.$$path.toString(), $location.$$absUrl.toString().indexOf("#")) + 1) + attrs.redirect; $window.open(baseUrl); } }); } } }
And in HTML, you can use the following to open in a new tab: 在HTML中,您可以使用以下内容在新标签中打开:
<a redirect="/admin/overview" newwindow="true">Open in new tab</a>
I used this and it works (angular4+): <button mat-menu-item> <a href="/faq/" target="_blank" style="color: inherit; text-decoration: none;"> <mat-icon>help</mat-icon>FAQ </a> </button>
我使用它并且它有效(angular4 +):
<button mat-menu-item> <a href="/faq/" target="_blank" style="color: inherit; text-decoration: none;"> <mat-icon>help</mat-icon>FAQ </a> </button>
I had to restore color to default and override browser's colors. 我必须将颜色恢复为默认值并覆盖浏览器的颜色。 This still gives me the ripple effect and everything with zero javascript code.
这仍然给我涟漪效果和零javascript代码的一切。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.