AngularJSプロジェクトのモダル内でブートストラップタブが機能しない

Question

他の人から聞いた同様の質問を見てきましたが、私のコードには答えがないようです。私は、メインコントローラから開いている1つのモーダルインスタンスを持っています。以下のHTMLに基づいています。

$scope.openUploadMediaModal = function ($event) { 
      $event.stopPropagation(); 

      modalInstance = $uibModal.open({ 
       animation: true, 
       backdrop: 'static', 
       templateUrl: 'properUrl', 
       controller: 'ModalCtrl', 
       scope: $scope, 
       resolve: { 
        files: function() { 
         return $scope.files; 
        } 
       } 
      }).result.then(function (media) { 
       //something 
      }); 
     } 

切り替えタブが動作していないと私は理由は分からない：

<div class="modal-header"> 
    <h3 class="modal-title">Add media</h3> 
</div> 
<div class="modal-body" style="min-height:auto;"> 
    <ul class="nav nav-tabs" id="tabContent"> 
     <li class="active"> 
      <a data-toggle="tab" data-target="#urlTab" href="">URL</a> 
     </li> 
     <li> 
      <a data-toggle="tab" data-target="#filesTab" href="">Upload files</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div id="urlTab" class="tab-pane fade in active"> 
      <form name="form.URLForm" class="form-group">         
      </form> 
     </div> 
     <div id="filesTab" class="tab-pane fade"> 
      <h3>Menu 2</h3> 
      <p>Some content in menu 2.</p> 
     </div> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" type="button" ng-click="save()" ng-disabled="form.URLForm.$invalid">Add</button> 
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
</div> 

モーダルをトリガーするコードは次のようです。最初のタブにあるものはすべて正しく機能しているため、コントローラや依存関係に問題はありません。それ以外に何ができますか？

非常に、ありがとうございます！

Answer 1

ちょうどあなたがモデルを作る方法