web-dev-qa-db-ja.com

Angularjs $ state新しいタブでリンクを開く

$ state.go関数を使用して「新しいタブでリンクを開く」関数を実装しようとしています。次のようなsmthがあれば素晴らしいでしょう。

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

AngularJSを使用してそれを行う方法はありますか？

angularjsangular-ui-routerangular-ui
70
Alex Arvanitidis

更新：OK、次のコードを使用して解決しました：

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');
140
Alex Arvanitidis

私はこれを試しました-明らかに、target="_blank"を追加するとui-srefで動作します：

<a ui-sref="routeHere" target="_blank">A Link</a>

コントローラーにコードを追加する手間を省き、通常のリンクと同様にホバー時にURLを提供します。ウィンウィン！

54
Patrick Calulo

アプリがサブフォルダーにある場合、localhostで動作しない場合があります。実際、私は同じ問題を抱えていました。

私はオンラインで試してみましたが、それを使用して期待どおりに機能しました：

<a ui-sref="routeHere" target="_blank">Link</a>
6
FrancescoMussi

私は同様の問題を抱えていました。以前の回答からうまくいかない場合はこれを試してください。

var url = '#' + $state.href('preview');
window.open(url,'_blank');

したがって、基本的にlocalhostで作業しているときに'#'を追加せずに、単にリダイレクトしていました

localhost/preview

、 の代わりに

localhost/Project_Name /＃/ preview

ここでは、新しいタブで$ stateを開くためだけに、データの受け渡しについては取り上げません。

5
Deepak Bandi

私が見つけた最良の回答は、ui.routerを拡張することでした。この機能はビルドインでは存在しないためです。詳細については、以下を参照してください。

Angular 1.x ui-routerの$ state.goの拡張

ただし、これをapp.jsまたはangular app initファイルに追加する必要があることの簡単な説明を次に示します。

angular.module("AppName").config(['$provide', function ($provide) {
    $provide.decorator('$state', ['$delegate', '$window',
        function ($delegate, $window) {
            var extended = {
                goNewTab: function (stateName, params) {
                    $window.open(
                        $delegate.href(stateName, params, { absolute: true }), '_blank');
                }
            };
            angular.extend($delegate, extended);
            return $delegate;
        }]);
}]);

コード内

次のことができるようになります。

$state.goNewTab('routeHere', { parameter1 : "parameter"});
4
Dalorzo

これを試して！

<a ui-sref="routeHere({parameter: vm.parameter})" target="_blank"></a>

2
Miko
ui-sref="routeHere" href=""target="_blank"

このコードは私の問題を解決しました。

これをアンカータグで使用します。

2
Zubair sadiq