Question

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

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

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

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

这个问题被标记为重复，但是看过重复我觉得不一样。全局回调函数可以被调用多次，Angular应用程序不知道将被调用多少次。

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

有关更多信息，请参见AngularJS $timeout Service API Reference

带有回调函数的Angularjs 1.5组件模态，被IE11中的嵌入式对象多次调用，而不更新Angular绑定

1 个答案: