angularjs – Angular：$apply已经在IE11中进行,但在FF和Chrome中没有

<input type="file" id="aircraftList" name="aircraftList" file-upload multiple/>

angular.module("app.directives").directive('fileUpload',function () {
    return {
        scope: true,link: function (scope,el,attrs) {
            el.bind('change',function (event) {
                scope.$emit("fileSELEcted",{ files: event.target.files,field: event.target.name });
            });
        }
    };
});

$scope.$on("fileSELEcted",function (event,args) {
        $scope.$apply(function () {
            switch (args.field) {
                case "aircraftList":
                    self.attachments.aircraftList = args.files;
                    break;
                default:
                    break;
            }
        });
    });

首先,你在一个已经执行的$digest循环中调用$apply. Chrome / FF对您来说可能没什么问题,但这对您来说真的很不错.真的,你受到用户PC性能的支配. Angular总是在发送事件时触发它自己的$摘要周期.你的$scope.$emit将在这里触发$digest.

你在这里遇到了一些问题,虽然它们会把所有东西捆绑在一起,并会引起更多这类问题.通常情况下,除非您正在响应从Angular外部触发的事件,否则不需要触发$digest循环.

您的指令文件上传器似乎太依赖于您的视图模型 – 它甚至告诉控制器应该将返回的数据存储在哪个字段中.记住,这是控制器的工作！我已经改变了你的代码,以确保不需要两个同时的$apply循环,这可以消除你的问题,并且还可以稍微整理一下代码.

我已经将指令更改为使用双向数据绑定而不是通过rootscope发送事件 – 对性能的重大改进以及功能的封装.

app.directive('testuploader',[function() {
    return {
        scope: {
            ngModel: '='
        },link: function(scope,el) {
            el.bind('change',function(event) {
                if (event.target.files && event.target.files.length > 0) {
                    angular.forEach(event.target.files,function (newFilE) {
                        scope.ngModel.push(newFilE);
                    });
                    scope.$apply();
                }
            });
        }
    };
}]);

这极大地简化了现在无需处理客户端事件的控制器 – 它只是介于视图模型和服务器上的任何底层数据模型之间

app.controller("TESTCtrl",['$scope',function($scopE) {    
    $scope.data = {
        aircraftList: []
    };
}]);

请参阅JSfiddle：https://jsfiddle.net/z2yLad92/27/

希望这可以帮助.