我想创建一个IONIC弹出对话框，其中包含弹出 Headers ，弹出框和弹出按钮部分 . 弹出体的内容是离子列表 .

这是期望的结果：

desired outcome

我使用下面列出的模板HTML实现了预期的结果：

<div class="padding">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-left" ng-repeat="bowler in allBowlers() track by bowler.timestamp"
      type="item-text-wrap" ng-click="onSelectBowler(bowler)">
        <i class="icon ion-chevron-left icon-accessory"></i>
        <h3>Name: {{bowler.name}} </h3>
        <span>Hand: {{bowler.hand}}</span>
        <ion-option-button class="button-assertive" ng-click="onRemoveBowler(bowler)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </div>

但是，上面的模板HTML代码存在问题 . 问题是，当我在列表项上滑动时（例如，在每个项目上显示'delete'按钮），控制台上将显示一条错误，其内容为：“未捕获的TypeError：无法读取属性'freeze'的null” .

我在互联网上做了一些研究，并找到了一个解决方案：a proposed solution to the 'freeze reference on null' problem by 'mhartington' . 正如所建议的那样，我将模板HTML代码包装在ion-content标签中 . 这是更新的代码：

<ion-content>
  <div class="padding">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-left" ng-repeat="bowler in allBowlers() track by bowler.timestamp"
      type="item-text-wrap" ng-click="onSelectBowler(bowler)">
        <i class="icon ion-chevron-left icon-accessory"></i>
        <h3>Name: {{bowler.name}} </h3>
        <span>Hand: {{bowler.hand}}</span>
        <ion-option-button class="button-assertive" ng-click="onRemoveBowler(bowler)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

上述两个版本之间的唯一区别是离子含量标签 .

离子内容确实解决了'null null on null'问题，当我在列表项上滑动时，控制台上没有打印错误消息 . 但是，出现了一个新问题（我找不到任何解决方案）：弹出按钮的位置似乎不正确 .

如下图所示，在我将模板HTML包装在一对离子内容标签后，在我看来弹出体（包含离子列表）不再具有高度，这可以通过弹出按钮（“取消”按钮）位于弹出 Headers 部分的正下方 .

这是一个屏幕截图，显示我的意思：

the popup button is positioned incorrectly

So, here comes to my question: what is the best way to do what I want to do here?

1）如果我不在模板HTML中使用离子内容，我该如何避免'null null on null'问题？

2）如果我必须将我的HTML模板包装在离子内容标签中，那么如何正确定位弹出按钮？

多谢！

最好的祝福，

克里斯

附：

这是我的CSS改变弹出窗口的维度：

.popup {
  width: 80% !important;
  height: 60%;
}

这是我用来在控制器中显示弹出对话框的代码：

$scope.selectBowler = function () {
    $ionicPopup.show({
      templateUrl: 'templates/popup-bowlers.html',
      title: 'Bowlers',
      scope: $scope,
      buttons: [
        {
          text: 'Cancel',
          type: 'button',
          onTap: function (e) {
            // empty function.
          }
        }
      ],
    });
  };
ionic-framework ionic ionicpopup