$(".modal").on("hide.bs.modal", function(){
$(".modal-bodydata").html("");
});
我有一个模型，我们可以上传成功上传的图书的相关图片，模态已关闭，内容显示为shoe = w，上传的图片应为空 这种情况很好但如果再次将图像上传到模态中，则所选项目不会显示在模态中
<div class="modal fade" id="imageModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">upload Images</h4>
</div>
<!-- data-ng-controller="bookController"-->
<div class="modal-body">
<form id="fileupload" method="POST" enctype="multipart/form-data"
data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" >
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files" multiple >
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit();test(book.bookId);" data-dismiss="modal">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()" data-dismiss="modal">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<div class="modal-bodydata">
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'"5 >
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
</td>
</tr>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我很确定，你正在使用＆＃34;普通的jquery bootstrap＆＃34;。根据你的用法：
"fs": {
"timestamp": 1445876141872,
"total": {
"total_in_bytes": 940360904704,
"free_in_bytes": 649207984128,
"available_in_bytes": 626626637824,
"disk_reads": 8840,
"disk_writes": 246,
"disk_io_op": 9086,
"disk_read_size_in_bytes": 127649792,
"disk_write_size_in_bytes": 13971456,
"disk_io_size_in_bytes": 141621248,
"disk_queue": "0",
"disk_service_time": "0"
},
"data": [
{
"path": "/data/cluster-name/nodes/0",
"mount": "/",
"dev": "/dev/vda1",
"type": "ext4",
"total_in_bytes": 422616936448,
"free_in_bytes": 131537268736,
"available_in_bytes": 114234032128,
"disk_reads": 8524,
"disk_writes": 232,
"disk_io_op": 8756,
"disk_read_size_in_bytes": 126358528,
"disk_write_size_in_bytes": 13914112,
"disk_io_size_in_bytes": 140272640,
"disk_queue": "0",
"disk_service_time": "0"
},
{
"path": "/data-new/cluster-name/nodes/0",
"mount": "/data-new",
"dev": "/dev/mapper/vg0-lvol0",
"type": "ext4",
"total_in_bytes": 517743968256,
"free_in_bytes": 517670715392,
"available_in_bytes": 512392605696,
"disk_reads": 316,
"disk_writes": 14,
"disk_io_op": 330,
"disk_read_size_in_bytes": 1291264,
"disk_write_size_in_bytes": 57344,
"disk_io_size_in_bytes": 1348608
}
]
},
你的问题是，当某些东西在角度变化之外时，你需要通过$ digest循环让角度知道。
基本上，您应该使用角度组件而不是javascript
例如这个 - ui-bootstrap将bootstrap包含在指令中，并且还为模态提供了很好的服务。 - https://angular-ui.github.io/bootstrap/#/modal