ionic開發中，輸入法鍵盤彈出遮擋住div元素

采用ionic 開發中，遇到鍵盤彈出遮擋元素的問題。

以登陸頁面為例，輸入用戶名和密碼時，鍵盤遮擋了登陸按鈕。

最終采用自定義指令解決了問題：

 

　　

.directive('popupKeyBoardShow', [function ($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) {
  return {
    link: function (scope, element, attributes) {
      window.addEventListener('native.keyboardshow', function (e) {
        angular.element(element).parent().parent().css({
          'margin-top': '-' + 80 + 'px'   //這里80可以根據頁面設計，自行修改
        })
      })

      window.addEventListener('native.keyboardhide', function (e) {
        angular.element(element).parent().parent().css({
          'margin-top': 0
        })
      })
    }
  }
}]);

 

　　　引用：將命名好的指令名 ：popupKeyBoardShow，按駝峰拆開用“-”連接成小寫，如：popup-key-board-show。

　　<popup-key-board-show>這里放div內容</popup-key-board-show>。如：

　　

<form action="">
          <popup-key-board-show>
            <div>
              <input type="text" ng-model="user.name" placeholder="用戶名">
            </div>
            <div style="margin: 24px 0;">
              <input type="password" ng-model="user.pwd" placeholder="密碼">
            </div>
            <div class="Login">登錄</div>
          </popup-key-board-show>

        </form>