我有一个
<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;
}
});
});
出于某种原因,这在Chrome和Firefox中运行良好,但在IE11中失败,出现以下错误：
如果我没有把$apply,chrome没有更新视图,但IE是.如果我把$apply,Chrome工作完美且IE中断.
谁知道这里出了什么问题？为什么会出错？
首先,你在一个已经执行的$digest循环中调用$apply. Chrome / FF对您来说可能没什么问题,但这对您来说真的很不错.真的,你受到用户PC性能的支配. Angular总是在发送事件时触发它自己的$摘要周期.你的$scope.$emit将在这里触发$digest.
原文链接：https://www.f2er.com/angularjs/141539.html你在这里遇到了一些问题,虽然它们会把所有东西捆绑在一起,并会引起更多这类问题.通常情况下,除非您正在响应从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/
希望这可以帮助.
