1
我已經使用離子的聊天應用程序。離子內容是可滾動的。 我做了一個指令「focus-on-keyboard-open」,其中當用戶點擊鍵盤時,移動鍵盤打開並且滾動在離子內容中下降。當用戶在鍵盤外部單擊時,鍵盤會關閉並再次向下滾動。問題是當我關閉鍵盤時,滾動變爲禁用離子內容,我必須刷新視圖才能使離子內容再次滾動。 這裏是html代碼離子內容滾動被禁用
<ion-content id="{{conversationId}}" on-scroll="onChatScroll(10)" delegate-handle="chat-convo-handle" class="has-header main-bg lg-chat-bg" ng-click="keyboardhide()">
....
</ion-content>
<ion-footer-bar class="custom-lg-bar lg-br-top sb-bg" keyboard-attach>
<textarea id="txtbox1" ng-keyup="keyup()" ng-keydown="keydown()" ng-blur="blur()" ng-change="change()" class="lg-text-area sb-bg" rows="1" msd-elastic ng-model="$root.chatFactory.msg_txt" placeholder="Type your message..." data-emojiable="true" focus-on-keyboard-open hidekeyboard="hidekeyboard"></textarea>
</ion-footer-bar>
該指令用於文本區域。這裏是我的指令代碼。
.directive('focusOnKeyboardOpen', function($window, $ionicScrollDelegate, $timeout) {
'use strict';
return {
restrict: 'A',
scope: {
hidekeyboard: '=hidekeyboard'
},
link: function(scope, element, attrs) {
var keyboardOpen = false;
// require cordova plugin https://github.com/driftyco/ionic-plugins-keyboard
$window.addEventListener('native.keyboardshow', function(e) {
keyboardOpen = true;
element[0].focus();
$timeout(function() {
$ionicScrollDelegate.$getByHandle('chat-convo-handle').scrollBottom(true);
$ionicScrollDelegate.$getByHandle('comment-handle').scrollBottom(true);
$ionicScrollDelegate.$getByHandle('post-comment-handle').scrollBottom(true);
}, 0);
});
$window.addEventListener('native.keyboardhide', function(e) {
keyboardOpen = false;
// if (scope.hidekeyboard) {
element[0].blur();
// }
});
element[0].addEventListener('blur', function(e) {
if (scope.hidekeyboard) {
keyboardOpen = false;
scope.hidekeyboard = false;
} else {
if (keyboardOpen) {
element[0].focus();
}
}
}, true);
}
};
})
我無法理解爲什麼滾動會在離子內容中失效。幫助任何人。另外在離子含量我的控制器和IM使用點擊事件,這會縮小鍵盤,
$scope.hidekeyboard = false;
$scope.keyboardhide = function() {
$ionicScrollDelegate.$getByHandle('chat-convo-handle').resize();
$ionicScrollDelegate.$getByHandle('chat-convo-handle').scrollBottom(true);
$scope.hidekeyboard = true;
cordova.plugins.Keyboard.close();
}