Функция asyn c в $ onInit не привязана к HTML

Question

Функция

asyn c при запуске OnInit после загрузки шаблона

Извинения, если это было задано. Кажется, я не могу найти что-то, говорящее о моем конкретном c сценарии.

В моем контроллере я определяю функцию $ onInit, которая вызывает функцию, которая, в свою очередь, вызывает асинхронную c функцию. Функция asyn c имеет блок перехвата, который устанавливает логическое значение для ng-if в шаблоне (управляет отображением сообщения об ошибке):

controller:

$onInit() {
    initFn();
}

function initFn() {
    innerFn();
}

function innerFn() {
    asyncFn
        .then(() => { 
            // does some stuff 
        })
        .catch(() => { 
            boolVal = true;
        })
}

template :

<div ng-if="boolVal">some-error-message</div>

Я проверяю это, отправляя обратно Promise.reject() для asyncFn, но сообщение об ошибке не отображается. boolVal, однако, true. Я думаю, что происходит, что шаблон компилируется и собирается до того, как вызов asyn c сможет завершить sh. Как убедиться, что все вызовы API завершены в $onInit до загрузки шаблона? Если это не проблема, что я пропускаю?

Спасибо!

Answer 1

Я проверяю это, отправляя обратно Promise.reject() для asyncFn

Обещания ES6, возвращаемые Promise.reject(), не интегрированы с инфраструктурой AngularJS. Вместо этого возврат AngularJS обещаний:

function asyncFn () {
    if (/* error condition */) {
        return $q.reject();
    };
}

AngularJS изменяет обычный поток JavaScript, предоставляя собственную обработку событий l oop. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от AngularJS привязки данных, обработки исключений, отслеживания свойств и т. Д. c. ¹

Для получения дополнительной информации см.

• AngularJS $ q Справочник по API службы - `$ q.reject

---

Каковы общие сценарии / службы, которые я должен знать

1. Остерегайтесь обещаний ES6 - используйте AngularJS обещаний
2. Остерегайтесь сторонних обещаний - используйте $q.when для преобразования в AngularJS обещаний
3. Остерегайтесь async / await - они возвращают обещания ES6
4. Остерегайтесь window.setTimeout - используйте $ timeout Сервис
5. Остерегайтесь window.setInterval - используйте $ интервал Сервис
6. Осторожно из jQuery.ajax - используйте $ http сервис

Событие извне AngularJS framework

1. Остерегайтесь element.addEventListener
2. Остерегайтесь jQuery.on
3. Остерегайтесь событий из сторонних API / библиотек

Вы также можете использовать $ apply () для входа в AngularJS контекст выполнения из JavaScript.

Имейте в виду, что в большинстве мест (контроллеры, службы) $ apply уже было вызвано для вас директивой, которая обрабатывает событие. Явный вызов $apply необходим только при реализации пользовательских обратных вызовов событий или при работе со сторонними вызовами библиотек.

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - интеграция с событием браузера l oop
• AngularJS $ scope / $ rootScope Class API Reference - $ применяется