出现键盘时，离子内容不会调整大小答案

【问题标题】：ion-content won't resize when keyboard appears出现键盘时，离子内容不会调整大小
【发布时间】：2016-01-14 09:40:04
【问题描述】：

我有一个具有聊天功能的应用程序，效果很好，除了一部分，当键盘出现时，离子内容不会调整到适当的高度，所以当我想滚动到顶部时我被卡住了并且标题完全消失了。该视图有一个页眉、内容和页脚，我想要的是显示在键盘上方的页脚和要调整大小的内容，使其适合页眉和页脚栏之间。我创建的视图如下：

<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
  <div class="loader-center" ng-if="!doneLoading">
    <div class="loader">
      <i class="icon ion-loading-c"></i>
    </div>
  </div>
  <div class="loader-center" ng-if="errorLoading">
    <div class="loader">{{'error_loading_messages'|translate}}</div>
  </div>
  <ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
    <ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
    <div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
      <div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
        <div class="message-detail">
          <span class="bold">{{message.postedBy.name}}</span>
        </div>
        <div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
        <img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
        <small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
      </div>
      <div class="cf"></div>
    </div>
  </ion-content>
  <ion-footer-bar class="bar-light message-footer">
    <button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
    <label class="item-input-wrapper" for="newmessage">
      <textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
    </label>
    <button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
  </ion-footer-bar>
</ion-view>

我尝试将keyboard-attach 属性添加到ion-footer-bar，但是当我添加它时，页脚只会变大。再加上页脚已经停留在键盘的顶部，所以它看起来是不需要的。我有下面这种情况，好像我打字的时候，view又涨了一点。

这是显示键盘的时候：

这是键盘隐藏的时候：

有谁知道当键盘出现时如何将离子含量调整到正常高度？

【问题讨论】：

看到这个stackoverflow.com/questions/31179470/…
谢谢，但这并不能解决我的问题。由于我已经安装了插件，所以我将首选项添加到了配置中，但没有任何变化。他的情况和我的情况是有区别的。在他的情况下，键盘位于整个视图（包括页脚）的顶部，而在我的情况下，视图向上移动，因此页眉和一半内容落在屏幕上。
爱你的独白:)
@Sietse - 我在使用 ionic2 聊天应用程序时遇到了类似的问题。你有解决办法吗？
@hardik.shah 我确实找到了解决方案，但我认为这不是一个好的解决方案。我会用我做过的事情写一个答案，因为此时，我不知道究竟是什么解决了它。

标签： angularjs keyboard ionic-framework ionic

【解决方案1】：

我尝试了一些方法，但问题似乎消失了，但我认为解决方案不是正确的，或者这实际上是解决问题的方法。所以如果有人有更好的解决方案，请分享。我必须做的第一件事是包含 Ionic 键盘插件以根据键盘获取事件。

在 CSS 内部，我添加了：

.message-footer { min-height: 44px; }

在我的控制器中，我添加了以下代码：

$scope.$on('taResize', function (e, ta) {
    if(!ta || !footerBar) return;

    var taHeight = ta[0].offsetHeight + 10;
    var newHeight = (taHeight < 44) ? 44 : taHeight;

    scroller.style.bottom = newHeight + 'px';
    footerBar.style.height = newHeight + 'px';
});

【讨论】：