0

ポップアップ ヘッダー、ポップアップ ボディ、ポップアップ ボタン セクションで構成される IONIC ポップアップ ダイアログを作成したいと思います。ポップアップ本文の内容はion-listです。

望ましい結果は次のとおりです。

望ましい結果

以下にリストされているテンプレート 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: Cannot read property 'freeze' 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>

上記の 2 つのバージョンの唯一の違いは、ion-content タグです。

イオンコンテンツは「null で参照をフリーズする」問題を解決し、リスト項目をスワイプしたときにコンソールに出力されるエラーメッセージはもうありません。ただし、新しい問題が発生します (解決策が見つかりません)。ポップアップ ボタンの位置が正しくないようです。

下の図に示すように、テンプレート HTML を 1 組のion-content タグでラップした後、ポップアップの本文 (ion-list を含む) に高さがなくなったように見えます。ポップアップ ボタン (「キャンセル」ボタン) は、ポップアップ ヘッダー セクションのすぐ下に配置されます。

これは、私が何を意味したかを示すためのスクリーン キャプチャ イメージです。

ポップアップ ボタンの位置が正しくありません

それで、ここで私の質問になります。ここでやりたいことを行うための最良の方法は何ですか?

1) テンプレート HTML でイオン コンテンツを使用しない場合、「null で参照をフリーズする」問題を回避するにはどうすればよいですか?

2) HTML テンプレートをion-content タグでラップする必要がある場合、ポップアップ ボタンを正しく配置するにはどうすればよいですか?

多くの感謝！

よろしくお願いします、

クリス

PS

ポップアップ ウィンドウのサイズを変更する 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