在 IE 11 中,我有一个 Angularjs 1.5 模态组件,如下所示。模态打开并在呈现事件时调用角度应用程序之外的函数,其中包含此组件中的回调函数。这个外部函数启动一个安装过程,该过程启动一个嵌入式对象,如下所示,然后定期调用回调函数。
我遇到的问题是从嵌入对象调用调用的每个回调函数的模板中的绑定都没有更新。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 应用程序不知道它会被调用多少次。