带有回调函数的Angularjs 1.5组件模态不更新绑定

Question

How to create a AngularJS promise from a callback-based API

Why are Callbacks from Promise .then Methods an Anti-Pattern

我有一个Angularjs 1.5模态组件，如下所示。模态打开并在呈现事件时，它使用包含在此组件中的回调函数调用angular应用程序外部的函数。该外部函数将启动安装过程，然后该安装过程将定期调用另一个函数reportbackStatus，该函数将调用回调并返回消息。

我遇到的问题是绑定没有在每个回调函数调用的模板中更新。 console.log已执行，我可以在控制台中看到该消息。绑定最初使用“启动过程”进行更新，因此绑定正确

<span ng-bind="$ctrl.messages[$ctrl.messages.length - 1]"></span>

我尝试将代码包装在scope.apply函数中，如下所示，但出现Error: $rootScope:inprog Action Already In Progress问题。只有完成所有操作后，最后的回调调用中才会显示最后一条消息。

这是处理多个回调和更新绑定的正确方法

  angular.module('components')
  .component('testModal', {
    bindings:{
      modalInstance: '<',
      resolve: '=',
      dismiss: '&',
      close: '&'
    },
    controller: TestController,
    templateUrl: 'scripts/components/TestModal.html'
});

TestController.$inject = ['$scope'];
function TestController($scope) {
  var ctrl = this;

  ctrl.$onInit = function(){
    ctrl.messages = [];
    ctrl.messages.push('starting process');
  };

  ctrl.modalInstance.rendered.then(function(){
    CallVanillaJSFunction(callback); 
  });

  function callback(message){
    ctrl.messages.push(message);
    console.log(ctrl.messages[ctrl.messages.length - 1]);
    CheckScopeBeforeApply();
  }

  function CheckScopeBeforeApply() {
    if(!$scope.$$phase) {
      $scope.$apply();
      console.log('scope applied');
    }
  };

}

香草功能

var globalCallback;

function CallVanillaJSFunction(callback){
    globalCallback = callback;
    initiateprocess();  
}

function reportbackStatus(message){
   globalCallback(message);
}

全局回调函数可以被调用多次，Angular应用程序不知道将被调用多少次。