Question

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

这是期望的结果：

我使用下面列出的模板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代码存在问题。问题是，当我在列表项上滑动时（例如，在每个项目上显示“删除”按钮），控制台上将显示一条错误，其内容为：“ Uncaught TypeError：无法读取属性'冻结'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'问题，当我在列表项上滑动时，控制台上没有打印错误消息。但是，出现了一个新问题（我找不到任何解决方案）：弹出按钮的位置似乎不正确。

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

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

所以，我的问题是：在这里做我想做的最好的方法是什么？

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

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

非常感谢！

致以最诚挚的问候，

克里斯

P.S。

这是我改变弹出窗口尺寸的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 Popup对话框：错误位置的按钮如果模板HTML包含<ion-content>标记

0 个答案: