Сторонний асинхронный обратный вызов в компоненте AngularJS 1.5 Компонент

Question

Перед тем, как AngularJS 1.5, в директивах или представлениях, будет проверен, будет ли изменение изменено угловым (с использованием цикла $ 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 двойной переплетены к контроллеру, но без использования $ объема $ применяется() для обратного вызова, изменение не будет подобран с помощью ng-show, так как цикл $ digest не запускается. Это очень раздражает, потому что мне придется затем ввести $ scope в контроллер и вызвать $ apply, но это побеждает цель полагаться на $ scope в первую очередь.

Я предполагаю, что способ состоит в том, чтобы инкапсулировать TPApi с помощью службы $q, тем самым гарантируя, что вызывается цикл $ digest, когда вызывается обратный вызов. Но что, если в какой-то момент я хочу перейти на новый API Promise вместо $q?

Есть ли разумный способ сделать это, не вызывая $ digest или угловатый 1 просто по своей сути ошибочный из-за $ scope и $ digest?

Answer 1

Поскольку вы вызываете сторонний API, вам придется разрешить угловое обновление и распознавание новых данных. Если вы не хотите использовать $ scope, вы можете обернуть свой код с помощью $ timeout (который вызывает цикл дайджеста для вас)

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