带有回调函数的Angularjs 1.5组件模态，被IE11中的嵌入式对象多次调用，而不更新Angular绑定 [英] Angularjs 1.5 component modal with callback function that is called multiple times by embedded Object in IE11 not updating Angular binding

问题描述

在IE 11中，我有一个Angularjs 1.5模态组件，如下所示.模态打开并在呈现事件时，它使用包含在此组件中的回调函数调用angular应用程序外部的函数.该外部函数将启动安装过程，该过程将启动嵌入式对象，如下所示，然后定期调用回调函数.

In IE 11, I have an Angularjs 1.5 modal component as below. The modal opens and on render event it calls a function outside of the angular app with a callback function contained in this component. This outside function initiates a install process which kicks off an embedded object as shown below and this then periodically calls the callback function.

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

The issue I am having is the binding is not being updated in the template on each callback function called from the embedded object call. The console.log is executed and i can see the message in the console. The binding is initially updated with 'starting process' so binding is correct

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

我尝试按以下方式调用scope.apply，但没有任何反应.仅当启动过程完成时，绑定才会使用最终回调调用中显示的最后一条消息进行更新.因此，initialprocess函数阻止了绑定，但没有阻止console.log的

I tried calling scope.apply as below but nothing happens. Only when the initiateprocess is completed, the binding is then updated with the last message shown from the final callback call. So the initiateprocess function is blocking the binding but no blocking the console.log's

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

is this the correct way to handle multiple callbacks and updating bindings

  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>

此问题被标记为重复，但查看重复项后，我认为这是不相同的.全局回调函数可以被调用多次，Angular应用程序不知道它将被调用多少次.

This question has been marked as duplicate but having looked at the duplicates I don't think it is the same. The global callback function can be called multiple times and the angular application does not know how many times it will be called.

推荐答案

使用$timeout服务强制浏览器打勾:

Use the $timeout service to force a browser tick:

  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服务同时执行框架摘要周期和浏览器呈现周期.

If the updates to the message occur all in the same browser tick, only the last update will be rendered. The $timeout service does both a framework digest cycle and a browser rendering cycle.

有关更多信息，请参见 AngularJS $ timeout服务API参考

For more information, see AngularJS $timeout Service API Reference

这篇关于带有回调函数的Angularjs 1.5组件模态，被IE11中的嵌入式对象多次调用，而不更新Angular绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！