angular+ionic的兼容性问题

同学们在试用angular+ionic开发移动端时,由于安卓和苹果系统的不同,微信和其他浏览器的不同,会出现很多难以解决的bug,下面是我在项目中遇到的一些bug

1、<ion-content class="zkht-callUp-container" overflow-scroll="false"></ion-content>

  overflow-scroll="false"遇到安卓上的微信页面会使识别二维码功能失效

  解决办法:overflow-scroll="true" 或者删除此属性

2、div设置了overflow-y:scroll;,但是安卓微信版却显示的overflow-y:hidden;的效果,苹果的微信和浏览器以及安卓的自带浏览器都是scroll显示的,唯独安卓微信不行

  解决办法:http://www.cnblogs.com/JoannaQ/archive/2013/06/24/3151843.html

3、<ion-content class="zkht-callUp-container" overflow-scroll="true"></ion-content>

  如果在a页面设置overflow-scroll="true" ,单独设置此属性会使苹果手机刚进入a页面可以实现滚动,但是a页面跳转到b页面再返回到a页面时滚动失效

  如果a页面还有横向滚动,overflow-scroll="false"会导致在安卓系统中横向滚动失效

4、<input type="number">在ios手机中还可以输入非数字

  解决办法:<input type="number" onchange="this.value=this.value.replace(/[^0-9.]+/,'');">

  如果在angular中遇到此问题,请注意:

  <input type="number" onchange="this.value=this.value.replace(/[^0-9.]+/,'');" ng-model="formData.inputVal">

  当页面刚加载时,打印formData.inputVal为“”

  当输入数字,再删除所有输入内容时,打印formData.inputVal为null

  在这里不能使用oninput="this.value=this.value.replace(/[^0-9.]+/,'');"

  使用oninput会导致输入非数字+数字时,拿到的输入框值为空

  补充: 猜想可能是oninput和onchange的出发机制不同造成的,oninput是在输入是立即触发,onchange是在失去焦点时触发

5、select插件在微信环境下出现无法点击显示下拉框

  解决方法: 在select的父元素中加入属性 data-tap-disabled="true"