Jquery 在引导模式关闭时重置引导模式，并使用相同的功能重新打开引导模式

我有一个模型，我们可以上传一本书的相关图片，一旦上传成功，模式关闭，内容显示为shoe=w上传的图片应该是空的 这种情况发生得很好，但如果再次在模式中上载图像，则所选项目不会显示在模式中

  $(".modal").on("hide.bs.modal", function(){
    $(".modal-bodydata").html("");
  });

&时代；
上传图像
添加文件。。。
开始上传
取消上传

{{file.name}

{{{file.error}}
{{file.size | formatFileSize}
开始
取消
接近

我很确定，您使用的是“普通jquery引导”。根据您的使用情况：

<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">&times;</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">&nbsp;</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>

您的问题是，当某些东西在angular之外发生变化时，您需要通过$digest循环让angular知道

基本上，您应该使用角度组件而不是javascript组件

例如，这个单用户界面引导程序将引导程序包含到指令中，并为modal提供了很好的服务。 -

$（“.modal bodydata”）.empty（）；你也可以使用。

 $(".modal").on("hide.bs.modal", function(){
    $(".modal-bodydata").html("");
 });