web-dev-qa-db-ja.com

AngularJS：新しいブラウザーウィンドウを開きますが、スコープとコントローラー、サービスは保持します

AngularJSアプリを書いています。この特定のコントローラーでは、$window.openサービスを介して新しいブラウザーウィンドウを開きます。しかし、新しいウィンドウでは、すべての$scope変数が失われます。

window.parentを使用しようとしましたが、これは機能しません。実際、新しいブラウザーウィンドウでは、すべてのアプリサービス、コントローラー、またはスコープがまったく有効ではありませんが、これは本当ですか？新しいブラウザウィンドウを開く方法はありますが、新しいウィンドウは古いウィンドウの同じangular appに属しますか？私はいくつかのangleJSサービスとそのスコープにアクセスする必要があります新しいウィンドウを開くコントローラー。これは可能ですか？

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller
28
phamductri

angularアプリケーションは通常、ドキュメント、ウィンドウ、およびウィンドウのイベントに関連付けられているため、新しいウィンドウを同じangle.jsアプリケーションに属する[直接的な]方法はありませんng-appディレクティブを使用するか、angular.bootstrapを呼び出して初期化しました。

ただし、ポップアップウィンドウ用に新しいangularモジュールとアプリケーションを作成できます。適切なJavaScriptファイルを含めることで、元のアプリケーションと同じ基本サービスとコントローラーを使用できます。

ポップアップウィンドウに元のアプリケーションからのデータが必要であると仮定すると、window.open（）メソッドから返されたウィンドウオブジェクトを使用してデータを渡すことができます。たとえば、最初のangularアプリケーションで、次のようにポップアップウィンドウを開きます。

angular.module('originalModule').service('popupService', function(someOtherDataService) {

  var popupWindow = window.open('popupWindow.html');
  popupWindow.mySharedData = someOtherDataService.importantData;

});

セカンダリ "popup" angularアプリケーションが初期化されると、window.mySharedDataを読み取って共有データを参照できます。

また、他のウィンドウから呼び出すことができる関数を各ウィンドウに作成することもできます。ポップアップウィンドウは、window.openerプロパティを使用して元のウィンドウにコールバックできます。 （window.parentはフレームの親ウィンドウを指し、window.openerが必要です）

[同意して、もしあなたがangularソースコードを研究したなら、同じangular appを両方のウィンドウに使用する賢い方法を見つけることができると確信しています。今夜の試みは私の野心を超えています。]

29
Geoff Genz

メインウィンドウによって開かれたウィンドウは、アーキテクチャ上、同じルートスコープをその親と共有できません。 angularスコープはDOM要素ごとに定義されます。子ウィンドウに完全に新しいAngularJsアプリをbootstrapする必要があります。

別のAngularJsアプリケーションをホストする新しいウィンドウ（子）がメインウィンドウ（親）によって生成された場合、次の解決策が実行可能になる可能性があります：新しく生成されたウィンドウのルートスコープを親ウィンドウから参照し、イベントを通信する親から子ウィンドウのスコープを介して。このようなもの：

オン子ウィンドウ：

$rootScope.$on("INTER_WINDOW_DATA_TRANSFER", function (data, args) {                   
            console.log("DATA RECEIVED: " + args.someData);
        });

親ウィンドウからあなたはng-app属性が定義されている（子ウィンドウ内の）DOM要素を保持します（それはルートスコープです）（擬似コード）：

var newWindowRef = $window.open("", "New Window", "width=1280,height=890,resizable=1");
var newWindowRootScope = newWindowRef.angular.element("#MY_ROOT_APP_ELEMENT_ID").scope();
newWindowRootScope.$broadcast("INTER_WINDOW_DATA_TRANSFER", {someData : "I'm data"});
9
Yan Yankowski

ウィンドウオブジェクトを使用してデータを渡すことができます。

構文：

$window.open('<linkname>').<variableName> = "your data";

例：

$window.open('<linkname>').var1 = "value1";

（注：-これは新しいリンクを開き、変数データを設定します）新しいページコントローラーでは、oldata = window.var1;を使用して変数にアクセスできます

6
Ramesh Babu