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

发布时间：2020-12-17 07:17:54 所属栏目：安全来源：网络整理

导读：我有一个 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'

我有一个

<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.

你在这里遇到了一些问题,虽然它们会把所有东西捆绑在一起,并会引起更多这类问题.通常情况下,除非您正在响应从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/

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!