$rootScope:inprog 动作已经在进行中

Question

我开始使用 Angular Material 并且很难理解 $scope.apply 功能的问题...每当我尝试通知 UI 关于通过调用 apply 进行的更改失败并出现错误。我知道关于 SO 有类似的问题，但在我的例子中，数据不是由 scope 存储的，而是由控制器实例存储的...

我也使用 TypeScript 来实现我的控制器；不确定，但这似乎并不常见，因为我发现的大多数示例代码都是基于视图中的内联控制器实现。

我的控制器看起来像那样...

module MyApp {

    export class MyController {

        private scope: angular.IScope;
        private http: angular.IHttpService;

        public model: { data: SampleData } = { data: { } };

        constructor($scope: angular.IScope, $http: angular.IHttpService) {
            this.scope = $scope;
            this.http = $http;
        }

        public querySampleData(): void {

            const serviceEndpoint: string = "http://localhost:8080/api/";
            var promise: ng.IHttpPromise<SampleData> = this.http.get(serviceEndpoint + "sample", { });

            var callback: ng.IHttpPromiseCallback<SampleData> = (
                data: SampleData,
                status: number,
                headers: angular.IHttpHeaderGetter,
                config: angular.IRequestConfig) => {
                this.scope.apply(() => {
                    this.model.data = data;
                };
            };

            promise.success(callback);
        }
    }

    export interface SampleData {
        message? string;
    }
}

控制器提供 querySampleData 方法从远程服务获取一些数据（它使用 IHttpService 进行异步 API 调用）。视图以下列方式使用控制器...

<html ng-app="app">
    <body ng-controller="MyController as c">
        <div>
            <button ng-click="c.querySampleData()" 
                    aria-label="Query sample data">Query sample data</button>
            <p>{{c.model.data.message}}</p>
        </div>
        ...
        <script src="../scripts/app.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", ["ngMaterial"]);
            app.controller("MyController", [ "$scope", "$http", MyApp.MyController ]);
        </script>
    </body>
</html>

控制器初始化正常；所有依赖项都正确地注入到控制器中，并且对 querySampleData 方法的绑定也按预期工作（当我单击按钮时，该方法被调用）。如果我将接收到的数据分配给模型，UI 不会更新，所以我添加了对 $apply 方法的调用以通知 UI 有关更改...这给了我我上面提到的错误。

更新：

https://docs.angularjs.org/error/$rootScope/inprog 处的文档建议使用 $timeout 而不是 $apply 以确保异步执行；当然这会修复错误，但是 UI 不会改变...

Answer 1

也许你可以试试 this.model.data = data; 然后 this.scope.apply();

Answer 2

AngularJS promises 已经在他们的回调中调用了 .apply()（在幕后）。您不能在回调中再次调用 .apply，因为它们已经被 .applied，并且错误 "In Progress" 准确地说明了这一点。只需删除 .apply 调用即可，除非您还有其他错误。

$rootScope:inprog 动作已经在进行中

$rootScope:inprog Action already In Progress

javascript

angularjs

typescript

angular-material