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">

将其删除。

离子模态的使用给出了空白的黑屏

1 个答案: