javascript – AngularJS 1.5 Component中的第三方异步回调

在AngularJS 1.5之前,在指令或视图中,当从第三方异步回调发出更改时,确保通过angular(使用$digest循环)获取更改的方法是在$scope中运行代码.$apply()调用.

对于组件,据我所知,想法是摆脱$scope并将模板绑定到组件的控制器.我正在尝试过渡到编写组件而不是视图,而不依赖于$scope.假设我有以下代码：

function CompController(TPApi) {
    let self = this;
    this.endCallback = false;
    TPApi.call(data,() => this.endCallback = true );
}

angular.module('app',[]).component('myComp',{
    controller: CompController,template: '<div><span ng-show="$ctrl.endCallback">Callback Called</span></div>'
})

这里的问题是ng-show被双重绑定到控制器,但是没有使用$scope.$apply()进行回调,因为$digest循环不会被ng-show取回被触发.这非常令人烦恼,因为我必须在控制器中注入$scope并调用$apply,但这首先打破了依赖$scope的目的.

我想一种方法是用$q服务封装TPApi,从而确保在发出回调时调用$digest循环.但是如果在某些时候我想转换到使用新的原生Promise API而不是$q呢？

有没有一种聪明的方法可以在不触发$digest的情况下执行此操作,或者由于$scope和$digest而有角度1本身存在缺陷？

解决方法

由于您正在调用第三方API,因此您必须让angular更新并识别到达的新数据.如果你不想使用$scope,你可以用$timeout包装你的代码(这会触发你的摘要周期)

function CompController(TPApi) {
    let self = this;
    this.endCallback = false;
    TPApi.call(data,() => $timeout(() => this.endCallback = true,0));
}