我有一个网站,允许一个人导入一些数据。他们单击一个按钮,文件选择打开并选择一个文件。当他们选择一个文件时,我会打开一个他们无法关闭的对话框,告诉他们他们的数据正在被导入。一旦我从 api 调用中得到回调以导入文件,我就会关闭该对话框并打开一个新的对话框,该对话框给出了导入的状态。
在 Chrome 上,“导入时请稍候”对话框按预期关闭。在 IE 上没有。如果您使用 IE 11,它应该发生在以下 fiddle 中:
http://jsfiddle.net/og6qsxdw/
您会看到一个幽灵般的对话框轮廓上升并逐渐消失,就像它试图关闭一样,但对话框和覆盖图仍然存在。
<div ng-controller="MyCtrl">
<input type="file" ng-simple-upload web-api-url="http://www.fakeresponse.com/api/?sleep=5" select-fn="importFileSelected" callback-fn="importDataComplete" />
<script type="text/ng-template" id="templateId">
<div>
Getting Data
</div>
</script>
</div>
JavaScript/AngularJS 代码:
var myApp = angular.module('myApp', ['ngDialog', 'ngSimpleUpload']);
function MyCtrl($scope, $http, ngDialog) {
$scope.importDataComplete = function() {
$scope.dlg.close();
}
$scope.importFileSelected = function() {
$scope.dlg = ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-default',
closeByDocument: false,
showClose: false
});
}
}
angular.module('ngSimpleUpload', [])
.directive('ngSimpleUpload', [function() {
return {
scope: {
webApiUrl: '@',
callbackFn: '=',
selectFn: '=',
buttonId: '@'
},
link: function(scope, element, attrs) {
// if button id value exists
if (scope.buttonId) {
$('#' + scope.buttonId).on('click', function() {
// retrieves files from file input
var files = element[0].files;
// will not fire until file(s) are selected
if (files.length == 0) {
console.log('No files detected.');
return false;
}
Upload(files);
});
} else {
// original code, trigger upload on change
element.on('change', function(evt) {
var files = evt.__files_ || (evt.target && evt.target.files);
Upload(files);
// removes file(s) from input
$(this).val('');
});
}
function Upload(files) {
var fd = new FormData();
angular.forEach(files, function(v, k) {
fd.append('file', files[k]);
});
// this tell us the user clicked open instead of cancel so we can start our overlay
scope.selectFn();
return $.ajax({
type: 'GET',
url: scope.webApiUrl,
async: true,
cache: false,
contentType: false,
processData: false
}).done(function(d) {
// callback function in the controller
scope.callbackFn(d);
}).fail(function(x) {
console.log(x);
});
}
}
}
}]);
最佳答案
好吧,交易就到这里了。在 IE 中,当您打开对话框时,会实例化两个实例。上传完成后,您可以引用关闭最近的对话框,但在几毫秒之前也已存在。
我一开始以为这只是一个丑陋的 IE 错误,您必须“跟踪”实例,但是,我没有注意到 jQuery 对您的链接功能的参与。因此,我最初的解决方案是一个黑客/解决方法,但可以做得更好。
似乎这两个库的混合是罪魁祸首,Angular 和 jQuery 无法正常通信。我在下面插入了对讨论 jQuery 事件与 Angular 的票证的引用。
jQuery and AngularJS: Bind Events to Changing DOM
解决方案
在这些情况下,我的建议是不要在 Angular 之上利用 jQuery。它增加了一层困惑,并要求您谨慎地保持两者之间的适当耦合(在这种情况下)。
我提供了一个解决方案,我可以在其中清理您的链接功能。它使用了很多现有的代码,但没有 jQuery 位。现在在 Chrome 和 IE 中对我来说似乎都很好。
http://plnkr.co/edit/6Z4Rzg1Zm3w5rYyqQqmg?p=preview
link: function(scope, element, attrs) {
console.warn("Element is", element);
// original code, trigger upload on change
element.on('change', function(evt) {
var files = evt.__files_ || (evt.target && evt.target.files);
Upload(files);
});
function Upload(files) {
var fd = new FormData();
angular.forEach(files, function(v, k) {
fd.append('file', files[k]);
console.log("File loaded");
});
// this tell us the user clicked open instead of cancel so we can start our overlay
scope.selectFn();
$http({
url: scope.webApiUrl,
method: "GET",
cache: true
}).success(function(d, status, headers, config) {
scope.callbackFn(d);
}).error(function(data, status, headers, config) {
console.warn("Request failed...");
});
}
}
关于angularjs - ngDialog 不是在 IE 上以编程方式关闭,而是在 Chrome 上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42819015/