我开始使用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不会更改。。。
AngularJS promise已经在回调中调用了.apply()
(在后台)。您不能在回调中再次调用.apply
,因为它们已经被.applied了,而错误"In Progress"告诉这一点。只要删除.apply
调用,它就会工作,除非您有进一步的错误。
也许你可以试试CCD_ 16然后CCD_ 17