$ onInit中的异步函数未绑定到HTML

Question

加载模板后OnInit触发中的异步函数

很抱歉，如果有人问这个。我似乎找不到与我的特定情况有关的内容。

在我的控制器中，我定义了一个$ onInit函数，该函数调用一个函数，该函数又调用一个异步函数。异步功能具有一个catch块，可为模板中的ng-if设置布尔值（控制是否显示错误消息）：

控制器：

$onInit() {
    initFn();
}

function initFn() {
    innerFn();
}

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

模板：

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

我通过发送回Promise.reject()的asyncFn进行测试，但错误消息未显示。但是，boolVal是true。我认为正在发生的是，在异步调用能够完成之前，模板已编译并生成。如何确保在模板加载之前$onInit中的所有API调用都已完成？如果这不是问题，那么我想念什么？

谢谢！

Answer 1

我通过发回Promise.reject()的asyncFn对此进行测试

Promise.reject()返回的ES6承诺未与AngularJS框架集成。相反，返回AngularJS promises：

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

AngularJS通过提供其自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。^[1

有关更多信息，请参阅

• AngularJS $q Service API Reference - `$q.reject

---

我应该知道哪些常见方案/服务

1. 提防ES6承诺-使用AngularJS承诺
2. 提防第三方承诺-使用$q.when转换为AngularJS承诺
3. 提防async / await-他们返回ES6承诺
4. [注意window.setTimeout-使用$timeout服务
5. 提防window.setInterval-使用$interval服务
6. 提防jQuery.ajax-使用$http服务

来自AngularJS框架之外的事件

1. 提防element.addEventListener
2. 提防jQuery.on
3. 当心从第三方API事件/库

您还可以使用$apply()从JavaScript输入AngularJS执行上下文。

> alt =“

请记住，在大多数地方（控制器，服务）$apply已经由处理事件的指令为您调用。 仅在实现自定义事件回调或使用第三方库回调时才需要对$apply进行显式调用。

有关更多信息，请参阅

• AngularJS Developer Guide - Integration with the browser event loop
• AngularJS $scope / $rootScope Class API Reference - $apply