3

ウィジェット ビルダー ツールと共に Angular に依存するウィジェットを作成しています。ビルダーは、ドキュメントのタグにngAppアタッチされたAngular を使用しました。html

ウィジェット ビルダー内でウィジェットをロードすると、次のエラーが発生します。

Error: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="company-widget" id="widget-app" data-company="demoCorp">'

ブートストラップ関数は次のとおりです。

angular.bootstrap('#widget-app', ["myWidget"]);

すべての意図と目的のために、myWidgetアプリの残りの部分は、コントローラーとサービスのかなり標準的な組み合わせです。

1 つのページで複数のディレクティブを許可する方法に関するこのブログ投稿をフォローしていngAppましたが、このことを設定するまで、ブログ投稿の最後にアプリをネストできないと書かれていることに気づきませんでした。 、これがここで起こっていることであり、このウィジェットを使用する少数のサイトで発生する可能性があることです.

widget-builder を再設計することはできません。ウィジェットが埋め込まれている Angular サイトでは、ホスト サイトがタグにアタッチngAppされると合理的に推測できます。html

私の質問は、ハックなソリューションであっても、この制限を回避する方法はありますか? ページに既にアプリがあるかどうかを確認し、そのmyWidgetアプリを依存関係としてホスト アプリに挿入することはできますか?

4

1 に答える 1

0

次のようなことを試すことができます：

https://jsfiddle.net/pavy/vnuxgwo/

// Parent/host application
var myApp = angular.module('myApp', []);

myApp.controller('AppCtrl',
    function($scope) {
        $scope.name = 'YourName';
    }
);

// Third party module
// This needs to happen after myApp is defined
var myWidget = angular.module('myApp');
myWidget.controller('MyWidgetCtrl',
    function($scope) {
        $scope.widgetName = 'This is my widget.';
    }
);

サード パーティ モジュール コード (ウィジェット) は、ホスト アプリ (この場合、ウィジェット ビルダー) コードの後に​​配置する必要があります。

また、ホスト アプリのモジュール名にも依存しているため、変更するとコードが壊れます。読み込まれた Angular アプリの名前をプログラムで取得する方法が考えられますが、これはこの点で役立ちます。

于 2016-01-11T22:25:29.130 に答える