イオンモーダルを使用すると黒い空白の画面が表示されます

Question

私はIonic Frameworkでアプリケーションを作成しています。

ionicModalを開こうとしているボタンをクリックすると、黒い画面が表示されます。

htmlコード：

<div class="well"> 
<h4>Add Proof</h4> 
<button style="width:100px;height:10px" class="button button-dark" ng-click="modal.show()">Add</button> 
</div> 
<script id="templates/newItem.html" type="text/ng-template"> 
    <ion-modal-view> 
    <ion-header-bar class="bar bar-header bar-positive"> 
     <h1 class="title">Add Proof</h1> 
     <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button> 

    </ion-header-bar> 
    <ion-content class="padding"> 

    <div class="list"> 
     <label> 
      <h4>Select from Pictures</h4> 
      <button class="button button-small button-dark">Browse</button> 
     </label> 

     <label class="item item-input"> 
     <input type = "text" placeholder="Description"> 
     </label> 

     </div> 
    </ion-content> 
    </ion-modal-view> 
</script> 

コントローラコード：

.controller('ProCtrl', ['$scope', '$state', '$ionicModal', function($scope, $state, $ionicModal) { 
      $ionicModal.fromTemplateUrl('templates/newItem.html', { 
      scope: $scope 
      }).then(function(modal) { 
      $scope.modal = modal; 
      }); 
}]); 

私のコードで間違っていますか？

Answer 1

あなたのindex.htmlファイルが

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> 

が含まれている場合、それを削除します。