Проверьте, загружен ли модуль AngularJS

Question

У меня есть iframe с приложением ASP.NET, который содержит UpdatePanel. Я начал использовать 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-контроллером, Angular выдает ошибку, говоря, что приложение уже загружено:

App Already Bootstrapped with this Element

Итак, вопрос: как я могу проверить, загружено ли приложение уже? Могу ли я перезагрузить этот модуль? Могу ли я удалить его из элемента и затем снова загрузить его?

Благодарю.

Answer 1

Нецелесообразно получать доступ к области из-за пределов приложения, поэтому она не включена в хорошо построенных производственных приложениях. Если вам нужно получить доступ / применить область действия, то в вашем случае использования есть что-то странное / неподдерживаемое.

Однако правильным способом проверить, был ли элемент загружен, является способ, которым библиотека 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
}

Можете ли вы сказать нам, почему вам нужно применить объем?

Answer 2

Вы можете просто проверить объем 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
    }
}

Обновить

После выпуска угловой версии 1.3+ в конце августа 2015 года в нее было добавлено улучшение производительности за счет отключения отладочной информации путем отключения отладочной информации. Поэтому обычно мы должны включить опцию debuginfo в false, чтобы иметь хорошее улучшение производительности в производственной среде. Я не хотел писать об этом слишком много, поскольку он уже охвачен ответом @AdamMcCormick, что действительно здорово.