ng-virtual-keyboard不能用离子模态工作

Question

我想在离子模态输入中实现虚拟键盘。为此，我使用这个基于jQuery的Mottie Keyboard的库，ng-virtual-keyboard。我已经在我的代码中实现了这一点，但是当我使用它与离子模式输入时，键盘是可见的，但无法点击。即，当我点击虚拟键盘时，点击它下面的区域。

我已经包括了所有指定的脚本，这里是我的代码

<script src="js/jquery.js"></script> 
<script src="lib/jquery-ui/jquery-ui.min.js"></script> 
<script src="lib/keyboard/dist/js/jquery.keyboard.min.js"></script> 
<script src="lib/keyboard/dist/js/jquery.keyboard.extension-typing.min.js"></script> 
<script src="lib/ng-virtual-keyboard/dist/ng-virtual-keyboard.min.js"></script> 

并显示模态的时候，我在做这个

$scope.$on('modal.hidden', function() { 
    // Execute action 
    $('.modal input').each(function() { 
     $(this).data('keyboard').destroy(); 
    }); 
}); 

$scope.$on('modal.shown', function(event) { 
    // Execute action 
    var asdf = $('.modal input').keyboard(); 
    $('.modal input').keyboard({ 
     layout: 'qwerty', 
     usePreview: false 
    }) 
    // activate the typing extension 
    .addTyping({ 
     showTyping: true, 
     delay: 50 
    }); 
}); 

我试着尽我所能解决这个问题，任何人都可以请建议一些修复？

Answer 1

我已经通过将css属性pointer-events: auto;添加到弹出窗口来解决它。

这是新的代码看起来像

在HTML，

<input type="search" ng-model="searchText" ng-virtual-keyboard="kb_config"> 

在控制器，

$scope.kb_config={ 
    layout: 'qwerty', 
    usePreview: false, 
    autoAccept: true, 
    autoUpdateModel: true, 
    css:{popup:'aiv-keyboard'} 
} 

和CSS，

.aiv-keyboard{ 
    pointer-events: auto; 
}