Angular.bootstrap error: Ошибка: [ng: btstrpd] Приложение уже загружено с помощью этого элемента

Я создаю виджет, который зависит от Angular вместе с инструментом построения виджета. Строитель использовал Angular с ngApp, прикрепленным к тегу html документа.

Когда я загружаю виджет внутри построителя виджета, я получаю следующую ошибку:

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

Для всех целей и задач остальная часть приложения myWidget представляет собой довольно стандартное сочетание контроллеров и служб.

Я следил за этим сообщением в блоге о том, как разрешить несколько директив ngApp на одной странице, однако я не понял до тех пор, пока я не установил это, что в конце сообщения в блоге говорится, что вы не можете встраивать приложения, что происходит здесь, и что может произойти на небольшом количестве сайтов, использующих этот виджет.

Я не могу перепроектировать виджет-построитель, и я могу разумно предположить, что для любых сайтов Angular, где виджет встроен, сайт узла будет прикреплять ngApp к тегу html.

Мой вопрос в том, есть ли способ обойти это ограничение, даже если это хакерское решение? Можно ли проверить, есть ли на странице уже приложение и ввести приложение myWidget в хост-приложение в качестве зависимости?

Ответы

Ответ 1

Вы можете попробовать что-то вроде этого:

https://jsfiddle.net/pavy/vnnuxgwo/

// 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.';
    }
);

Код стороннего модуля (ваш виджет) должен появиться после приложения-хоста (в вашем случае это будет код Builder).

Вы также зависите от имени модуля хост-приложения, поэтому, если он изменится, ваш код сломается. Есть вероятные способы программно получить загруженное имя приложения Angular, которое поможет в этом отношении.