如何在没有 $scope 的情况下在 Promise.all() 中更新 AngularJS (1.7.x) 中的 DOM？答案

【问题标题】：How Do I Update The DOM in AngularJS (1.7.x) in Promise.all() Without $scope?如何在没有 $scope 的情况下在 Promise.all() 中更新 AngularJS (1.7.x) 中的 DOM？
【发布时间】：2018-12-09 05:35:49
【问题描述】：

我们一直在努力为将来从 AngularJS 迁移到 Angular 做尽可能多的准备工作。我的理解是我们要尽可能避免使用 $scope。但是，我发现我正在执行 Promise.all() 并且我无法弄清楚如何在没有 $scope.$apply() 的情况下更新 DOM。这里以一些伪代码为例。

Angular 1.7.x 问题：当 Promise.all() 解析时，如何让 DOM 呈现新值？大街上的消息是我们不应该使用 $scope.$apply()，但这就是我能想到的...

export class FooController {

    constructor(FooService, $scope) {
        this.fooService = FooService;
        this.$scope = $scope;
    }

    $onInit() {
        this.data = [];
        this.requests[...]; // holding some requests
        this.updateData();
    }

    updateData() {
        let promises = [];
        this.requests.forEach(i => promises.push(this.fooService.get(i)));

        Promise.all(promises)
            .then(res => {
                this.data = res;
                this.$scope.$apply();
            })
    }
}

FooController.$inject = ['FooService', '$scope'];

export const fooComponent = {
    templateUrl: templateUrl,
    controller: FooController
}

【问题讨论】：

使用 $q.all()，AngularJS 承诺会为你调用 $scope.$apply。

标签： angularjs promise angularjs-scope angular-promise

【解决方案1】：

使用$q service：

export class FooController {

    constructor(FooService, $q) {
        this.fooService = FooService;
        this.$q = $q;
    }

    $onInit() {
        this.data = [...];

        this.updateData();
    }

    updateData() {
        let promises = [];
        this.data.forEach(i => promises.push(this.fooService.get(i)));

        ̶P̶r̶o̶m̶i̶s̶e̶.̶a̶l̶l̶(̶p̶r̶o̶m̶i̶s̶e̶s̶)̶
        this.$q.all(promises)
            .then(res => {
                this.something = res;
                ̶t̶h̶i̶s̶.̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
            })
    }
}

FooController.$inject = ['FooService', '$q'];

export const fooComponent = {
    templateUrl: templateUrl,
    controller: FooController
}

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

ES6 Promise 没有与 AngularJS 执行上下文集成。而是使用由$q Service 创建的承诺。

【讨论】：

【解决方案2】：

要在 DOM 中使用值，该值应附加到范围或控制器。因此，如果不更改 $scope 或控制器属性的值，则无法更改 DOM 中的任何值

【讨论】：

我明白你在说什么。我没有很好地输入我的伪代码。它现在已更新以显示结果被设置为控制器的 data 属性。虽然它仍然没有解决问题。 AngularJS 不会在 Promise.all() 中消化，所以即使控制器上的属性按照你说的那样设置，DOM 也不会更新。