我正在使用模态窗口上传图像。但是,当单击“上传”时,我要上传图像,然后关闭模式窗口。当我data-dismiss="modal"
在按钮中用作属性时,它只是关闭了窗口而没有执行任何其他操作。所以我找到了一些如何关闭它的选项,但是一切都在Jquery的帮助下完成,例如:$('#my-modal').modal('hide');
但是我使用了angular并尝试在控制器中完成它,但是没有成功。我也尝试这些答案关闭Bootstrap模态onclick,但是没有运气。
最终,我这样做:
document.getElementById('fileUpload').value = null;
var dialog = document.getElementById('complete-dialog');
dialog.style.display = 'none';
dialog.className = 'modal fade';
dialog.setAttribute('aria-hidden', 'true');
dialog.removeChild(dialog.firstChild);
并且它关闭了模式窗口,但随后我无法在网页上滚动。我不知道如何做得更好。
谁能帮我弄清楚如何从angularjs关闭模态窗口,或者至少如何在angularjs内使用jquery?
编辑:HTML,我打开模式窗口:
<div class="image col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1">
<button class="btn btn-fab btn-raised btn-primary" data-toggle="modal" data-target="#complete-dialog"><i class="mdi-image-edit"></i></button>
</div>
HTML模式窗口:
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div id="test-dialog" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close-btn" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="color: black;">Upload profile picture</h4>
</div>
<div class="modal-body" style="color: black;">
<form name="userForm" data-ng-submit="profile.uploadImageToServer()" autocomplete="off">
<div class="form-group">
<!--<label for="fileUpload">Profile image</label>-->
<input type="file" name="fileUpload" id="fileUpload" onchange="angular.element(this).scope().uploadImg(this.files)">
</div>
<div class="text-center form-group">
<button id="submit-btn" type="submit" class="btn btn-large btn-primary">Upload Image</button>
</div>
</form>
</div>
<!--<div class="modal-footer">-->
<!--</div>-->
</form>
</div>
</div>
</div>
角度控制器:
me.uploadImageToServer = function(){
console.log('uploading');
console.log($scope.file);
var fd = new FormData();
//Take the first selected file
fd.append('file', $scope.file[0]);
if($scope.file.length>0) {
me.user.image = '/img/'+ me.user._id + (($scope.file[0].type.indexOf('png') > -1) ? '.png' : '.jpg');
User.update(me.user, function(response){
AuthenticationState.user = response.data;
}, function(response){
console.log(response);
});
User.uploadImage(fd, function (response) {
console.log(response);
me.user.image = me.user.image + '?time=' + new Date().getTime();
AuthenticationState.user.image = me.user.image;
document.getElementById('fileUpload').value = null;
//var dialog = document.getElementById('complete-dialog');
//dialog.style.display = 'none';
//dialog.className = 'modal fade';
//dialog.setAttribute('aria-hidden', 'true');
//dialog.removeChild(dialog.firstChild);
$scope.$close(me.file);
me.file = [];
}, function (response) {
console.log(response);
me.file = [];
});
}
};
最后,我通过调用关闭按钮上的click事件解决了我的问题,该按钮做了data-dismiss =“ modal”并关闭了modal对话框。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句