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

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

0 голосов
/ 07 ноября 2018

В 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>

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

1 Ответ

0 голосов
/ 08 ноября 2018

Используйте службу $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

...