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


81

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

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

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


次のコードで解決したという質問の編集は冗長に思えます。つまり、それはあなたがあなたの受け入れられた答えとしてそれを選んだという事実によって暗示されます。
Adam Zerner 2015

修正、編集を削除しました。
Alex Arvanitidis 2015年

答えはここにありますAngularjs $ state open link in new tab
Dalorzo

回答:


153

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

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

18
それはベストプラクティスの$ windowではありませんか?
tsuz 2016

3
パラメータを新しいウィンドウに渡すことができますか?
hjl 2016

はい@elaijuh彼らは渡されます
Manuel Di

@alex定義されたウィンドウをターゲットにしたいので、window.open(url、 'myWindow');を試しました。しかし、それは機能しません。何か助けはありますか?
mhd 2016年

1
この方法でjavascriptからリンクを開き、ベースURLが変更された場合、サイトがポップアップを開こうとしたとブラウザがブロックする可能性がありますが、ユーザーがWebサイトを開くことを承認または承認すると、作業。
GabLeRoux 2017

55

私はこれを試しました-どうやら、追加はでtarget="_blank"動作しui-srefます:

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

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


3
これは<a>でのみ機能します。「ターゲット」は明らかに他の要素では機能しません。つまり、<button ui-sref = "routeHere" target = "_blank">リンク</ button>
ルイス

2
@Luis ButtonsにはTarget属性がないため、
機能しません

1
@Luisたぶん、ボタン関連のクラスとアンカータグのボタンとしての役割を使用して、ボタンのように見せることができます。例:<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">A Link</a>
Safwan 2018

7

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

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

したがって、基本的にローカルホストで作業している間は、追加せずに'#'リダイレクトするだけでした

ローカルホスト/プレビュー

、 の代わりに

localhost / Project_Name /#/プレビュー

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


6

アプリがサブフォルダーにある場合、ローカルホストでは機能しない可能性があります。私は実際に同じ問題を抱えていました。

私はオンラインで試しましたが、以下を使用して期待どおりに機能しました。

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

4
ui-sref="routeHere" href=""target="_blank"

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

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


4

私が見つけた最も良い答えは、ui.routerを拡張することでした。これは、この機能が組み込まれていないためです。詳細については、こちらをご覧ください。

Angular 1.xui-routerの$ state.goを拡張する

ただし、これを行う必要があることについての簡単な説明を以下に示します。これをapp.jsまたはangular appinitファイルに追加します。

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

2

これを試して!

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


これは関係ありません。呼び出すルートにパラメータを追加する必要があるとは言いませんでした。このルートを新しいタブで開きたいと言いました。
Alex Arvanitidis 2016

これは多くの人に関係があるかもしれません。私はこれを使用しました。ここで言及することの1つは、パラメーター名は一重引用符で囲む必要があるということです。<a ui-sref = "routeHere({'parameter':vm.parameter})" target = "_ blank"> </a>
SudheerMuhammed19年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.