9

UpdatePanel を含む ASP.NET アプリケーションの iframe があります。アプリケーション内で Angular を使い始めましたが、.NET ポストバックが原因でうまくいきませんでした。

これを解決するために、次のソリューションを使用しました。

with (Sys.WebForms.PageRequestManager.getInstance()) {
            add_endRequest(onEndRequest); // regester to the end Request
        }

function onEndRequest(sender, args) {
    angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply();
    }
}

そして、それはうまく機能します。

問題は、ASP.NET ページで別のユーザー コントロールを別の ng-controller で動的に読み込むと、Angular がアプリが既に読み込まれているというエラーをスローすることです。

App Already Bootstrapped with this Element

問題は、アプリが既にブートストラップされているかどうかを確認するにはどうすればよいですか? このモジュールをリロードできますか? 要素から削除して、再度ブートストラップすることはできますか?

ありがとう。

4

2 に答える 2

18

アプリの外部からスコープにアクセスすることはお勧めできないため、適切に構築された運用アプリケーションでは有効にできません。スコープにアクセス/適用する必要がある場合、ユースケースについて奇妙な/サポートされていないものがあります。

ただし、要素がブートストラップされているかどうかを確認する正しい方法は、要素をロードしてインジェクターを確認するという Angular ライブラリの方法です。したがって、angular.element(document.querySelector('#mainDiv')).injector();どちらがコードを作成するかが必要になります。

function onEndRequest(sender, args) {
    var element = angular.element(document.querySelector('#mainDiv'));

    //This will be truthy if initialized and falsey otherwise.
    var isInitialized = element.injector();
    if (!isInitialized) {
        angular.bootstrap(element, ['defaultApp']);
    }

    // Can't get at scope, and you shouldn't be doing so anyway
}

スコープを適用する必要がある理由を教えてください。

于 2015-12-28T22:08:10.613 に答える
3

のスコープを簡単に確認できます。そうでないmainDiv場合angular.element(document.querySelector('#mainDiv')).scope()は、まだ初期化されていないundefinedことを意味します。angular

あなたのコードは以下のようになります。

コード

function onEndRequest(sender, args) {
    //below flag will be undefined if app has not bootsrap by angular.
    var doesAppInitialized = angular.element(document.querySelector('#mainDiv')).scope();
    if (angular.isUndefined(doesAppInitialized)) //if it is not 
        angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply(); //I don't know why you are applying a scope.this may cause an issue
    }
}

アップデート

2015 年 8 月後半に angular 1.3+ がリリースされた後、デバッグ情報を無効にしてデバッグ情報を無効にすることで、パフォーマンス関連の改善が追加されました。したがって、通常は debuginfo オプションを false に有効にして、本番環境でパフォーマンスを向上させる必要があります。@AdamMcCormickの回答ですでにカバーされているので、あまり書きたくありません。これは本当にクールです。

于 2015-02-09T18:57:08.470 に答える