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

【问题标题】：$rootScope:inprog Action already In Progress$rootScope:inprog 动作已经在进行中
【发布时间】：2016-07-18 21:23:58
【问题描述】：

我开始使用 Angular Material 并且很难理解 $scope.apply 功能的问题...每当我尝试通过调用 apply 来通知 UI 有关更改时，它都会失败并显示错误。我知道关于 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 不会改变...

【问题讨论】：

标签： javascript angularjs typescript angular-material

【解决方案1】：

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

【讨论】：

好的；我弄清楚为什么我没有看到 UI 中的任何变化......这是因为我使用了别名 c 超出了它的范围......愚蠢的我（-；你的答案是正确的；如果那里的绑定很好'无需手动调用apply。

【解决方案2】：

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

【讨论】：