使用離子模態給出空白黑屏

Question

我在離子框架中製作應用程序。

當我點擊應該打開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"> 

將其刪除。