Angularjs Ionic framework modal仅显示黑色下拉列表，没有实际内容

我正在做一个离子混合应用程序，我有一个模态的问题

<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
    <div class="buttons" style="margin-top:20px;">    
    <button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
      <h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
  </div>
 </ion-header-bar>   
<ion-content style="margin-top:75px;">

  <div id="errors" class="center" style="color:red;text-align:center;">
    <ul>
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>
  </div>
  <div class="center login-title">Transactions List</div>


<div class="row">
       <div class="col">Date</div>
       <div class="col">Transaction</div>
       <div class="col">Amount</div>
       <div class="col"></div>
</div>

<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
       <div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
       <div class="col">{{transaction.ProPayID}}</div>
       <div class="col">${{transaction.Amount}}</div>
       <div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>

当我调用modal.show（）方法时，我看到的是Black下拉列表，而不是实际的模态内容（我从文档中复制粘贴了示例）。 在检查chrome中的模态对象时，我看到它已很好地实例化

我认为这与我的项目设置有关，所以我将把它们复制到这里

index.html（占位符）

保存按钮以调用模式的页面

<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
    <div class="buttons" style="margin-top:20px;">    
    <button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
      <h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
  </div>
 </ion-header-bar>   
<ion-content style="margin-top:75px;">

  <div id="errors" class="center" style="color:red;text-align:center;">
    <ul>
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>
  </div>
  <div class="center login-title">Transactions List</div>


<div class="row">
       <div class="col">Date</div>
       <div class="col">Transaction</div>
       <div class="col">Amount</div>
       <div class="col"></div>
</div>

<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
       <div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
       <div class="col">{{transaction.ProPayID}}</div>
       <div class="col">${{transaction.Amount}}</div>
       <div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>

{{error}

交易清单
日期
交易
数量
{{transaction.Date}日期：“MM/dd/yy”}
{{transaction.ProPayID}
${{transaction.Amount}
细节

最后是我的simple modal.html

  <div class="modal">
    <header class="bar bar-header bar-positive">
      <h1 class="title">Sample Modal</h1>
    </header>
    <ion-content has-header="true" padding="true">

      <p ng-repeat="data in boulderDataChanges">{{data}}</p>
      <button class="button" ng-click="fakeLogin()">Fake Login</button>
    </ion-content>
  </div>

样本模态
{{data}
假登录

---

如前所述，控制器正确地调用了它，但视图只显示了没有模式标记的黑幕，结果发现问题在于我的项目中有一个引导css，它杀死了离子模式css

当我从索引中删除这一行时

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

它起了很大的作用

---

顺便说一句，我之所以使用这个css，是因为如果index.html文件包含

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

把它取下来，它就会工作了

编辑 这是因为

中的
.model
类在bootstrap.css中设置了
display:none
因此，您可以简单地修改引导（只需删除模型）。
如果您想保持引导未修改，只需将此额外的css规则添加到您的项目中，这将解决黑背景问题：

.modal-wrapper .modal { display:block; }

为了说明这一点，我已经在模式侦听器中实现了console.log，它们都在启动。我还注意到，当我删除jQuery依赖项时，名为$el的模态对象属性发生了变化，但仍然没有显示模态html，只是显示了黑色的Drop。您可以切换到scss版本并添加一些引导代码？实际上更简单的是，我只是先加载了这个css，然后加载了ionic css和walla