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

Question

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

如果有人问到这个问题，我们深表歉意。我似乎找不到适合我的特定情况的内容。

在我的控制器中，我定义了一个 $onInit 函数，该函数调用一个函数，该函数又调用一个异步函数。 async 函数有一个 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>

我通过发回 asyncFn 的 Promise.reject() 来测试这个，但是错误消息没有显示。然而，boolVal 是 true。我认为正在发生的事情是模板在异步调用能够完成之前编译和构建。如何确保所有 API 调用在模板加载前完成 $onInit？如果那不是问题，我还缺少什么？

谢谢！

Answer 1

I test this by sending back a Promise.reject() for asyncFn

return 由 Promise.reject() 编辑的 ES6 承诺未与 AngularJS 框架集成。相反，return AngularJS promises:

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

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

有关详细信息，请参阅

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

what are common scenarios/services that I should be aware

注意 ES6 承诺——使用 AngularJS promises
当心第三方承诺 -- 使用 $q.when 转换为 AngularJS promises
注意 async/await -- 他们 return ES6 promises
注意 window.setTimeout - 使用 $timeout 服务
注意 window.setInterval -- 使用 $interval 服务
注意 jQuery.ajax -- 使用 $http 服务

来自 AngularJS 框架之外的事件

提防element.addEventListener
提防jQuery.on
注意来自第三方 API/库的事件

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

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

有关详细信息，请参阅

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

async function in $onInit not binding to HTML

angularjs

promise

angularjs-scope

angular-promise

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

来自 AngularJS 框架之外的事件