Как обновить DOM в AngularJS (1.7.x) в Promise.all () без $ scope?

Question

Мы старались максимально подготовить приложение к работе для будущей миграции с AngularJS на Angular.Насколько я понимаю, мы должны избегать максимально возможного использования $ scope.Однако я нахожу ситуацию, когда выполняю Promise.all () и не могу понять, как обновить DOM без $ scope. $ Apply ().Вот пример псевдокода.

Angular 1.7.x вопрос: Как заставить DOM отображать новые значения при разрешении Promise.all ()?На улице говорят, что мы не должны использовать $ 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
}

Answer 1

Использование службы $ q :

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 не интегрированы с контекстом выполнения AngularJS.Вместо этого используйте обещания, созданные службой $ q .

Answer 2

Чтобы использовать значение в DOM, это значение должно быть присоединено к области или контроллеру.Таким образом, вы не можете изменить любое значение в DOM без изменения значения $ scope или свойства контроллера