0

我想制作一个由弹出标题、弹出正文和弹出按钮部分组成的 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 代码存在问题。问题是当我在列表项上滑动时（例如，在每个项目上显示“删除”按钮），控制台上会打印一个错误，它显示为：“未捕获的类型错误：无法读取属性‘冻结’为空”。

我在互联网上进行了一些研究，并在以下位置找到了解决方案：'mhartington' 提出的“freeze reference on null”问题的解决方案。按照建议，我将模板 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>

上述两个版本之间的唯一区别是 ion-content 标签。

ion-content 确实解决了“在 null 上冻结引用”问题，当我在列表项上滑动时，控制台上不再显示错误消息。但是，出现了一个新问题（我找不到任何解决方案）：弹出按钮的位置似乎不正确。

如下图所示，在我将模板 HTML 包装在一对 ion-content 标记中后，在我看来，弹出正文（包含 ion-list）不再具有高度，这就是证明弹出按钮（“取消”按钮）位于弹出标题部分的正下方。

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

弹出按钮位置不正确

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

1) 如果我不使用模板 HTML 中的 ion-content，如何避免“在 null 上冻结引用”问题？

2) 如果我必须将我的 HTML 模板包装在 ion-content 标记中，那么如何正确定位弹出按钮？

多谢！

此致，

克里斯

附言

这是我改变弹出窗口尺寸的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.
          }
        }
      ],
    });
  };
4

0 回答 0