web-dev-qa-db-ja.com

AngularJs-新しいタブでURLを開く

公開ページと管理ページを備えたアプリケーションがあります。ログイン後に新しいタブで管理ページを開きたいです。ログインに成功した後、これを試しましたが、効果はありませんでした。パブリックページ（ログインがある）がリロードされています。

var url = $state.href('/admin/overview');
$window.open(url, '_blank');

任意のヒントをいただければ幸いです。ありがとうございました。

javascriptangularjsangular-ui-router
16
VictorB

動作する JSFiddle があります。$window使用する前に：

JS：

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$window', function ($scope, $window) {
    $scope.redirectToGoogle = function () {
        $window.open('https://www.google.com', '_blank');
    };
}]);

HTML：

<div ng-app="myApp" ng-controller="dummy"> 
    <a ng-href="" ng-click="redirectToGoogle()">Hello</a>
</div>
29
michelem

ここに別の作業があります JSFiddle

HTML：

<div ng-controller="MyCtrl">
<a ng-href="{{url}}" target="_blank">Visit jsfiddle</a>
</div>

JS：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.url ='http://jsfiddle.net/HB7LU/16771/';
}
14
Thomas Dijoux

新しいタブでリンクを開く簡単な方法、

 <a href="{{details.website}}" ng-click="openNewTab(details.website)"> 
    {{details.website}}
 </a>
     $scope.openNewTab = function (url) 
    {
      $window.open(url, '_blank');
     };

使用する前に$windowコントローラー。

2
Gopakumar AP

これを行うためのディレクティブを持つことができます。

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

HTMLでは、次を使用して新しいタブで開くことができます。

<a redirect="/admin/overview" newwindow="true">Open in new tab</a>
1
Adarsh Konchady

私はこれを使用して動作します（angular4 +）：<button mat-menu-item> <a href="/faq/" target="_blank" style="color: inherit; text-decoration: none;"> <mat-icon>help</mat-icon>FAQ </a> </button>

色をデフォルトに戻し、ブラウザの色を上書きする必要がありました。これにより、波及効果と、javascriptコードがゼロのすべてが得られます。

0
gilm