首页 文章

如何在Promise.all（）中更新AngularJS（1.7.x）中的DOM而不使用$ scope？

提问于
浏览 次
0

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

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
}
angularjs promise angularjs-scope angular-promise

2 回答

  • 0

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

    回复于
  • 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创建的承诺 .

    回复于

相关问题