javascript - Angular js html不更新

Question

我编写了一个简单的 graphql 查询来获取对象数组。当我执行 console.log() 时，该数组就会显示出来。然而，当获取数据时，数组不会更新 html。我需要点击屏幕才能更新。

我正在使用 Angular JS 堆栈和 graphql。看来这个问题只与 Angular js 有关，与 API 调用无关。

以下是JS中的api调用:

graphql("...").then(
    result => {
        $scope.data = result.data;
});

HTML:

<div>{{data.length}}</div>

Answer 1

更简洁的方法是使用 $q.when 将第三方 Promise 转换为 AngularJS Promise:

$q.when(graphql("...")).then(
    result => {
        $scope.data = result.data;
});

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典执行上下文和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才会受益于 AngularJS 数据绑定(bind)、异常处理、属性监视等... ¹ 由于 Promise 来自 AngularJS 框架外部，因此框架不知道模型的更改，也不会更新 DOM。

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when