angularjs - Angular : $apply already in progress in IE11, 但在 FF 和 Chrome 中没有

Question

我有一个

<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 崩溃。

任何人都知道这里出了什么问题以及为什么会出错？

Answer 1

实际上，chrome和 FF与 IE11 相比，javascript 引擎非常快javascript引擎。

Hence, when the $scope.$on("fileSelected" is triggered in chrome & 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;
            }
        });
    });