javascript - AngularJS 1.5 组件中的第三方异步回调

Question

在 AngularJS 1.5 之前，在指令或 View 中，当第三方异步回调发出更改时，确保更改将被 Angular (使用 $digest 循环)拾取的方法是在 $scope.$apply() 调用。

据我所知，对于组件，想法是摆脱 $scope 并将模板绑定(bind)到组件的 Controller 。我正在尝试在不依赖 $scope 的情况下过渡到编写组件而不是 View 。假设我有以下代码:

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 被双重绑定(bind)到 Controller ，但是如果不使用 $scope.$apply() 进行回调，ng 将不会获取更改-show 因为 $digest 循环不会被触发。这非常令人烦恼，因为我必须在 Controller 中注入(inject) $scope 并调用 $apply，但这首先违背了依赖 $scope 的目的。

我想一种方法是用 $q 服务封装 TPApi，从而确保在发出回调时调用 $digest 循环。但是，如果在某个时候我想过渡到使用新的原生 Promise API 而不是 $q 怎么办？

是否有一种聪明的方法可以在不触发 $digest 的情况下执行此操作，或者 angular 1 只是因为 $scope 和 $digest 而存在固有缺陷？

Answer 1

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

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