我有一个
<input type="file" id="aircraftList" name="aircraftList" file-upload multiple/>
绑定(bind)到指令
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 });
});
}
};
});
我在 Controller 中捕获此事件:
$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 不会更新 View ,但 IE 会。如果我把 $apply,Chrome 完美运行,IE 崩溃。
任何人都知道这里出了什么问题以及为什么会出错?
最佳答案
实际上,chrome
和 FF
与 IE11
相比,javascript 引擎非常快javascript引擎。
Hence, when the
$scope.$on("fileSelected"
is triggered inchrome
&FF
, the previous$digest
loop will be completed at the time of$scope.$apply
is executed and hence no errors. As there is no$digest
cycle is running at this stage, we need another$digest
cycle to update the view with help of$scope.$apply
and without this, view won't be updated.As
IE
is comparatively slow on the same scenario above,$scope.$apply
is throwing error as there is one$digest
loop is running currently. Hence, without$scope.$apply
, the view will get updated with help of the running$digest
cycle.
当我们使用
$timeout
正如其他用户所说,它将在当前 $digest
开始执行循环已完成并确保使用另一个 $digest
更新 View 环形。希望它能澄清你:-)
$scope.$on("fileSelected", function (event, args) {
$timeout(function () {
switch (args.field) {
case "aircraftList":
self.attachments.aircraftList = args.files;
break;
default:
break;
}
});
});
关于angularjs - Angular : $apply already in progress in IE11, 但在 FF 和 Chrome 中没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39140087/