Модульный компонент Angularjs 1.5 с функцией обратного вызова, которая вызывается несколько раз встроенным объектом в IE11, не обновляющим привязку углов

Question

В IE 11 у меня есть модальный компонент Angularjs 1.5, как показано ниже. Модал открывается, и при рендеринге он вызывает функцию вне углового приложения с функцией обратного вызова, содержащейся в этом компоненте. Эта внешняя функция инициирует процесс установки, который запускает внедренный объект, как показано ниже, и затем периодически вызывает функцию обратного вызова.

У меня проблема в том, что привязка не обновляется в шаблоне для каждой функции обратного вызова, вызываемой из вызова встроенного объекта. Console.log выполнен, и я вижу сообщение в консоли. Привязка изначально обновляется с помощью "запуска процесса", поэтому привязка является правильной

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

Я попытался вызвать scope.apply, как показано ниже, но ничего не происходит. Только после завершения initiateprocess привязка обновляется последним сообщением, отображаемым из последнего вызова обратного вызова. Таким образом, функция initiateprocess блокирует привязку, но не блокирует файл console.log.

это правильный способ обработки нескольких обратных вызовов и обновления привязок

  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;
    var complete = initiateprocess();
    globalCallback(complete);
}

Встроенный объект

<OBJECT ID="testObj" CLASS......
<SCRIPT language=javascript for=testObj event="OnEvent(message);">
      if(navigator.userAgent.indexOf("Trident") != -1)
      {
         globalCallback(message);
      }
    </SCRIPT>

Этот вопрос был помечен как дубликат, но, посмотрев на дубликаты, я не думаю, что это то же самое. Глобальная функция обратного вызова может вызываться несколько раз, и угловое приложение не знает, сколько раз она будет вызвана.

Answer 1

Использовать $timeout Сервис для принудительной установки галочки браузера:

  function callback(message){
    $timeout(function() {
       ctrl.messages.push(message);
       console.log(ctrl.messages[ctrl.messages.length - 1]);
    });
    ̶C̶h̶e̶c̶k̶S̶c̶o̶p̶e̶B̶e̶f̶o̶r̶e̶A̶p̶p̶l̶y̶(̶)̶;̶
  }

Если все обновления сообщения происходят в одном и том же окне браузера, будет отображаться только последнее обновление. $timeout Сервис выполняет как цикл дайджеста фреймворка, так и цикл рендеринга в браузере.

Для получения дополнительной информации см. Справочник по API AngularJS $ timeout Service