aty

我们的android hybrid app开发使用到了ionicframework作为UI框架，ionic框架的发展和更新非常快，而且做出的界面也很好看。我自己引入ionic框架的时候，遇到了问题：invalid regular expression。有点奇怪，我们知道对于js文件来说，min是压缩版(实际部署的时候都是使用min版本)，不含min(源文件，一般在开发过程中使用)。但是压缩版和源码版功能都是一样的，一时半会儿也不知道为啥引入源码版会报错，但是引入压缩版没有问题。只好看源码，从源码中寻找答案了

前端模板技术不是什么新技术了，有很多知名的js模板引擎，如：HandlebarsJS、Mustache 、artTemplate、还有我最近在学习的ionic框架等。这些模板引擎一般都是使用<script>来承载模板内容。这些模板引擎使用<script>标签作为载体，将type修改成自己定义的类型。由于<script>的type不是"text/javascript"，所以不会被浏览器当做脚本执行，也不会显示到页面上。但最重要的区别在于：script里面的内容被当做普通字符串，但是template被当做文档碎

一个典型的页面：包含header、content和footer的页面。有2点需要说明下：1.创建我们自己的angular模块，必须要继承ionic，否则无法使用<ion-content>等。2.<ion-content>元素的class属性一定要加上has-header，否则content会被header遮挡。我们也可以使用<ion-header-bar>和<ion-footer-bar>创建header和footer。

现在回到我们在项目中遇到的问题，就很好理解了。页面初始化的时候，并没有弹出popover，所以我们并没有初始化popover。ionic不会将<script>下的模板内容插入到DOM树下，而jquery是不能选中<script>下的元素的。解决方案就很简单了：在页面初始化调用fromTemplateUrl的时候，先显示popover再隐藏即可。这样就能够触发ionic将<script>下的模板插入到DOM树，这样jquery就能选中了。

但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在手机屏幕上滑动的时候，一不小心很容易就会点中这些输入框，当输入框获得焦点，页面就不能滑动了。使用<ion-scroll>一样有这个问题，当页面全是画廊控件的时候，滑动也十分费劲。从ionic文档中也没有找到好的解决办法，最后解决方法是：不使用<ion-scroll>指令，自己实现左右滑动。利用HTML5中的to

ionic页面footer按钮右下方的小三角实现

很显然我们希望这几个popover之间不要相互干扰，这个很容易，因为每次调用fromTemplateUrl打开新的popover时候都会新建一个scope，彼此之间自然是隔离的。由于这几个popover很类似，自然也有一些公共操作。所以我们可以：将公共的属性和方法放在parent scope中，需要彼此隔离的数据放在child scope中。

之前的这篇博客"通过项目中定位的一个问题：学习ionic框架$ionicPopover的使用以及注意事项"介绍了popover组件的基本使用，可以参考这篇文章学习下popover组件的使用。最近项目发现了一个新问题：当popover下面放置很多按钮的时候，手机端上不能显示全部按钮，而且不能滑动。解决方案1：使用<ion-content>;方案2：使用<ion-scroll>

ionic版本从v1.0.0升级到v1.2.4后,android上使用<ion-content>的页面无法滑动