Ionic Frameworkでng-ifを利用した際に高さのリサイズをする

🗓️ 2016-03-23

📑 Post

Ionic利用時にion-contentを利用すればコンテンツのスクロールよしなにやってくれるが、ng-ifで要素の追加・削除を行うとスクロールサイズが更新されず、スクロールが最後までできない場合がある。引っ張ったりすると内部でイベント発火されるのか、サイズ更新されたりしますが…。あまりよろしくないので解決方法。

環境

Ionic 1.2.4
Angular 1.4.3
Cordova 6.0.0

以下リサイズサンプルの簡単なコード

HTML

<body ng-controller="Main as main">
    <ion-content>
      <label ng-repeat="item in [true, false]">
        {{item}}
        <input type="radio" name="switchRadio" ng-value="item" ng-model="main.switch" ng-change="main.resize()" />
      </label>
      <div ng-if="main.switch">LongLongHeightContents:)</div>
    </ion-content>
</body>

Javascript

angular.module('app', ['ionic'])
  .controller("Main", ['$ionicScrollDelegate', function ($ionicScrollDelegate) {
    this.resize = function () {
      $ionicScrollDelegate.resize();
    };
  }])
  ;

Ionicは基本的にDelegateとしてモジュールロードできる場合が多いので助かるが、一機能のためにひたすら読み込みが増えていくのでエディタの横幅が気になったりなんたり。

参考

ng-show/ng-if doesn’t update dom height immediately

🏷️ #Ionic