ionic开发篇之踩坑集
来源：互联网 发布：淘宝直通车基础题答案 编辑：程序博客网 时间：2024/05/18 00:29
一、API篇
1.接口无法访问
百度地图、自定义API无法访问，远程调试结果显示404
原因是cordova 5.x的版本增加了“Content-Security-Policy”用于解决安全访问的问题。默认情况下，只能访问本机资源。
解决方法：
1.添加白名单插件，在项目目录下执行
<code class="language-BAT hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">ionic plugin add cordova<span class="hljs-attribute" style="box-sizing: border-box;">-plugin</span><span class="hljs-attribute" style="box-sizing: border-box;">-whitelist</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
2.在index.html头部增加
<code class="language-HTML hljs scilab has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><meta http-equiv=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Content-Security-Policy"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"script-src * '</span>unsafe-<span class="hljs-transposed_variable" style="box-sizing: border-box;">eval'</span>; connect-src * <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'unsafe-eval'</span>; object-src <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'self'</span>; style-src * <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'unsafe-inline'</span>; img-src *<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">" ></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
2.无法跨域访问
服务端设置(PHP)
<code class="language-PHP hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;">header(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Access-Control-Allow-Origin: *'</span>)</span>;<span class="hljs-function" style="box-sizing: border-box;">header(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Access-Control-Allow-Credentials:true'</span>)</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
3.POST请求提交自动变成Options请求
当我们使用浏览器调试的时候，发现POST请求会自动变成Options请求，然后调用任意接口都提示不能跨域访问，即使服务端已经设置允许跨域访问。
解决方法：
<code class="language-JavaScript hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">.config(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">( <span class="hljs-variable" style="box-sizing: border-box;">$stateProvider</span>, <span class="hljs-variable" style="box-sizing: border-box;">$urlRouterProvider</span>, <span class="hljs-variable" style="box-sizing: border-box;">$ionicConfigProvider</span>, <span class="hljs-variable" style="box-sizing: border-box;">$httpProvider</span>)</span> {</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use x-www-form-urlencoded Content-Type</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$httpProvider</span>.defaults.headers.post[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Content-Type'</span>] = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'application/x-www-form-urlencoded;charset=utf-8'</span>; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>这个问题只出现在浏览器调试中，实际在手机里运行不需要这个配置。
4. ionic 里使用 iframe 可能遇到的问题
无法访问外部url的问题–两个步骤解决：
iframe的src属性用ng-src属性替代，并指明绑定对象： ng-src=”{{targetUrl}}”
在controller里，调用
高度无法最大化的问题–两个步骤解决：
ion-content 属性里添加 scroll=”true” overflow-scroll=”true”，参考
iframe content scroll issue #1151
iframe的style里添加 min-height: 100%，参考
Fill content container
Ionic与第三方的Wap网页交互
采用Windows.Open的方法，打开一个浏览器，不带地址栏，全屏的窗口，显示第三方的WebApp页面。
代码如下：
<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// event类型有以下几种类型</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// loadstart - 开始加载</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// loadstop - 完成加载</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// loaderror - 加载出错</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// exit - 窗口退出</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">ref</span> = window.open(encodeURI(url), <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'_blank'</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'location=no'</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">ref</span>.addEventListener(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'loadstart'</span>, function(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">event</span>) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">event</span>.url.match(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"mobile/close"</span>)) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">ref</span>.close(); } }); </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>当浏览器内的url地址包含 mobile/close页面的时候，就会关闭当前的浏览器。
具体可以参考
http://cordova.apache.org/docs/en/3.0.0/cordova/inappbrowser/inappbrowser.html
二、调试篇
1.本地调试
电脑上本地调试，用ionic serve即可在浏览器中调试
2.远程调试
1.在手机上运行debug版软件，在电脑上调试程序
2.在启动手机上的APP后，在谷歌浏览器（其实360也行）上输入chrome://inspect/#devices，可以进入调试界面（如果出不来，请翻墙） 
3.单击inspect，可以进入当前显示的页面调试，调试方法和和在浏览器上一致。
远程调试可以快速定位，在浏览器上没有发现的问题，方便调试手机API接口
三、应用篇
1.导航置底设置
好不容易按教程一步步建立了tabs样例工程，却发现安卓机上这个tab导航在顶部，浏览器和ios这个导航在顶部。
解决方案：
在app.js里添加以下代码
<code class="language-JavaScript hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">.config(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$stateProvider</span>, <span class="hljs-variable" style="box-sizing: border-box;">$urlRouterProvider</span>, <span class="hljs-variable" style="box-sizing: border-box;">$ionicConfigProvider</span>)</span> {</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.ios.tabs.style(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'standard'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.ios.tabs.position(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'bottom'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.android.tabs.style(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'standard'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.android.tabs.position(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'bottom'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.ios.navBar.alignTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.android.navBar.alignTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.ios.backButton.previousTitleText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>).icon(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ion-ios-arrow-thin-left'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.android.backButton.previousTitleText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">''</span>).icon(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ion-android-arrow-back'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.ios.views.transition(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ios'</span>); <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicConfigProvider</span>.platform.android.views.transition(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'android'</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>2.百度地图开发
坑1：使用了插件angular-BMap
使用了插件angular-BMap
这个插件功能并不完善，好多功能都没有，如果要使用需要继续开发（如果你有时间，有兴趣，有能力可以fork后继续开发）
坑2：使用了百度地图实例代码，地图不显示
<code class="language-JavaScript hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">new</span> BMap<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Map</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"container"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建地图实例 </span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> point <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">new</span> BMap<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>Point(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">116.404</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">39.915</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建点坐标 </span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>centerAndZoom(point, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 初始化地图，设置中心点坐标和地图级别 </span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
其实只是在模拟手机的浏览器下不显示，在浏览器上不要选择任何手机型号，就能显示，而实际我在自己的手机上build后，也是能正常显示的。具体原因没有深究，如果有知道的朋友欢迎来信。
坑3：GPS位置偏移
使用$cordovaGeolocation.getCurrentPosition()获得的坐标，在百度地图上位置偏移。原因是GPS坐标和百度地图坐标并不是完全对应的，需要使用百度地图提供的GPS坐标转换接口进行转换
<code class="language-JavaScript hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">posToAddrByBaidu</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(lat, long)</span>{</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> Ak = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'yourAK'</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//你应用的AK</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> getUrl = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'http://api.map.baidu.com/geocoder/v2/?'</span>+ <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ak='</span> + Ak +<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'&location='</span> +lat+ <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">','</span> + long + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'&output=json&pois=0'</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$http</span>.get(getUrl) .success(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(data)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (data[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'status'</span>] == <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'0'</span>) { <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.appeal.location = data.result.formatted_address; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'定位失败'</span>; } }).error(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"网络问题"</span>); }); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li></ul>坑4 infowindow里面的a链接只能跳转一次
BMap中创建的infowindow，如果里面带有a链接，第一次跳转后，第二次进去就无法跳转了。这个问题目前不知道怎么解决，如果有人知道请告诉我，谢谢。
四、常见错误
1. 编译错误
a. Execution failed for task ‘:app:mergeDebugResources’ OR Execution failed for task ‘:Application:processDebugResources’
<code class="language-BAT hljs tex has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\Users</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\admin</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\AppData</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\Local</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\Android</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\sdk</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\build</span>-tools\23.0.3<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\aapt</span>.exe'' finished with non-zero exit value 1* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.Error: Error code 1 for command: cmd with args: /s,/c,"D:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\myApp</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\platforms</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\android</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\gradlew</span> cdvBuildDebug -b D:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\myApp</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\platforms</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\android</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\build</span>.gradle -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true"</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
检查一下，看看是不是哪里的资源文件命名不规范，文件名称不规范就可能导致该问题.
或者执行以下命令：
<code class="language-CMD hljs tex has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">C:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\></span>D:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\myApp</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\platforms</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\android</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\gradlew</span> cdvBuildDebug -b D:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\myApp</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\platforms</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\android</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\build</span>.gradle -D org.gradle.daemon=true -Pandroid.useDeprecatedNdk=true" --info --debug > d:<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\debug</span>.info</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
然后从d:\debug.info文件中查找详细的错误信息。
常识与技巧篇
- list 有延迟，可以在ion-content处使用 overflow-scroll=”true”尝试
- 在上用ng-click上是没效果的
- 快捷修改背景色style=”background-color: #212326;”
- 能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高
- 直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div
- 可以用ng-class=”{‘important’: post.important}”配合css 根据列表元素显示不同的效果
- 获取日期用
filter，varpostdate= filter(‘date’)(date, ‘yyyy-MM-dd HH:mm:ss’); - 列表中的元素不能写成 id : 4，应写成 id : “4”,注意在创建id变量的时候也需要转成string,如：
var id = InfoListService.getListLength()+1+"";- 使用
log进行log输出,为什么用 log而不是console.log呢？可以看看这个 - 在安卓上的体验比较差，动画有延迟？可以试试ionic集成的crosswalk
- controllers和services 的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService
- 安装cordova插件的时候用ionic plugin add …的方式添加，这样会在package.json中添加这个插件的条目，如果有人clone了你的项目想在本地运行，可以用ionic state restore它会根据cordovaPlugins条目安装对应的插件。如果直接用cordova plugin add 安装则不会更新package.json。
- 上传base64编码的时候如果提示413错误，是因为文件过大导致的，可以在nodejs中设置bodyparser的文件限制:
- 使用
<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> bodyParser = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">require</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'body-parser'</span>);app.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">use</span>(bodyParser.json({limit: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'50mb'</span>}));app.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">use</span>(bodyParser.urlencoded({limit: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'50mb'</span>, extended: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>}));</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>- img 中 base64编码的图片无法显示？在源码中发现angular添加了unsafe标签？需要在白名单中添加data:image
<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">$compileProvider.imgSrcSanitizationWhitelist(/^\s*(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">https</span>?|<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">ftp</span>|mailto|content|<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">file</span>|assets-library):|data:image<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">\//);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
- 有时候pm2运行有问题，重启一下即可
Q&A篇
Q: 在 iOS 下使用 cordova-plugin-file-transfer 下载中文名文件失败，提示 Could not create target file
A: encodeURI(“包含霸气的中文文件名的 URI”)
Q: 应用需要存储较大量数据，原始格式是 json ，存 sqlite 数据库嫌麻烦。
A: lokiJS ，类 mongodb 的 js 内存数据库，配合为 ionic 打造的插件做持久化存储。
Q: 不同 Android 手机上出现字体错位之类的奇怪问题。
A: 使用 Crosswalk 消除不同安卓机上 WebView 的差别，顺便还能提升应用性能。
Q: 在实机上使用 livereload 功能时出现空白、连接失败等情况。
A: 实机上的 livereload 本质是用手机访问电脑上的网站，检查手机和电脑之间的网络连接是否通畅。
Q: gitignore 默认排除了 plugins 文件夹，团队其他人 clone 了项目后缺少插件，一个一个装太麻烦。
A: ionic platform add/remove xxx 以及 ionic plugin add/remove xxx 的时候，Ionic CLI 都在 package.json 中保存了项目的状态。clone 完后可以使用 ionic state restore 命令快速恢复
Q: 在哪里查看 Ionic 带的所有图标？
A: http://ionicons.com
Q: 在 ionic platform add xxx 时卡住
A: 挂 VPN ，或者丢着睡一觉（不确定是不是网络原因，就遇过两次没深究）
Q: tel:xxxxx sms:xxxxxx mailto:xxxxxx geo:xxxxxx 一类的链接不能唤起其他应用。
A: 在 config.xml 中加入：
<code class="language-xml hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">access</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">origin</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"*"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">access</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">origin</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"tel:*"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">launch-external</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">access</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">origin</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"sms:*"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">launch-external</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">access</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">origin</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"mailto:*"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">launch-external</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">access</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">origin</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"geo:*"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">launch-external</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"yes"</span>/></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
Q: 跟上 Q 一样，加了还 TM 不行！
A: 再在 config.xml 中加入：
<code class="language-xml hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">allow-intent</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"tel:*"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">allow-intent</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"sms:*"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">allow-intent</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"mailto:*"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">allow-intent</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"geo:*"</span>/></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
Q: Android 中调用其他应用打开 applicationDirectory 下的文件时提示路径不存在， iOS 可以。
A: 两个系统策略不一样， Android 中有这个需求简单的办法是参考该页中的 Android 文件系统布局，把文件从 Private 目录复制到 Public 目录下再做操作。
Q: 对 Android 进行远程调试。
A: 打开 Chrome ，地址栏输入 chrome://inspect
Q: 对 iOS 进行远程调试
A: 打开 Safari -> 开发 -> 手机名 -> 应用名
Q: Ionic 的 Modal 是什么鬼？不能给它设定状态么？！
A: 超级弱逼的模态框，因为 uirouter 的限制，给它转状态非常不方便。确定只需要一个页面就能完成的操作才用他。下一 Q 提供个解决办法。
Q: 替代 Modal 的方案
A: 在 $state.go 前记录下当前的 view ，然后禁止下一个 view 记录 backView ，就不会显示后退按钮（ Android 硬件后退也不行 ）。在需要关闭时，后来加入导航栈的任意 view 中设置 backView 为记录下来的 view ，然后 back 。
<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// go 的时候</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> backHistoryId = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.currentHistoryId();<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> backViewId = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.currentView().viewId;<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.nextViewOptions({ disableBack: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>, disableAnimate: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>});<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span>.go(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'my-awesome-modal'</span>, {backViewId: backViewId});<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// back 的时候</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> backHistoryId = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.currentHistoryId();<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> backView = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.viewHistory().histories[backHistoryId].stack.filter(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(v)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> v.stateId === <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateParams</span>.backViewId;})[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.backView(backView);<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicHistory</span>.goBack();</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li></ul>Q: ionic serve 或在实机调试时开启了 livereload 功能时的跨域问题
A:道理还是因为这两种状态下， APP 实际是在访问电脑上的一个网站，任何指向其他地方的链接都是跨域。实机不开 livereload 则不存在这个问题。
简单的方法就是用实机调试且不开 livereload 。
复杂点的比如设置 Ionic 自带的代理服务器，参考链接。需要详细了解这个问题也可以看一遍。
Q: 如何在某个界面中去掉导航栏?
A: 如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加hide-nav-bar=”true”
如何在ionic中加载本地图片?
A: 对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：
<code class="language-CSS hljs css has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.login-page</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">url(../img/signup_bg.png)</span></span></span>; <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-size</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> cover</span></span>; <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-repeat</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> no-repeat</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>但是对于在页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：
<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"img/commander.jpg"</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
Q: 如何在ionic中嵌入网页代码?
A: 使用ng-bind-html这个类,不过它会过滤原始html的标签，我们可以引入
Q: 如何将template加载到某个tab或某个sidemenu项目下?
A:<ion-nav-view name="menuContent">可以指定name，然后在子状态中使用该name，ionic就知道该把该状态的template渲染到哪边了。例如：
<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// signup page</span> .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'auth.signup'</span>, { url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/signup'</span>, views: { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'auth-signup'</span>: { templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'templates/auth-signup.html'</span>, controller: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'SignUpCtrl'</span> } } })</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>另有一个tabs中声明该auth-signup:
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span> title<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Sign Up"</span> icon<span class="hljs-attribute" style="box-sizing: border-box;">-on</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-ios-personadd"</span> icon<span class="hljs-attribute" style="box-sizing: border-box;">-off</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-ios-personadd-outline"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#/auth/signup"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span> name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"auth-signup"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
Q: 运行serve命令时ionic报错?
A:
<code class="hljs fsharp has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">ionic $ An uncaught <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">exception</span> occured <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">and</span> has been reported <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> Ionic</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
看看你是不还有一个终端在运行着serve呢？
Q: 用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?
A:可以用ionic serve -all的方法解决
Q: 加载页面的时候会看到双括号一闪而过？
A: angularjs在使用双括号的时候，第一个加载的页面，也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用ng-bind。 ng-bind使用方式如下: <p ng-bind="greeting"></p>
Q: 更新了数据，如何让界面更新呢？
A: 可以用广播，注意
Q: 如何实现IonicView中card上面有一列分割线的效果?
A: 在css里定义
<code class="language-css hljs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-id" style="box-sizing: border-box;">#info-up</span> <span class="hljs-rules" style="box-sizing: border-box;">{ <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border-top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">4</span>px solid <span class="hljs-hexcolor" style="box-sizing: border-box;">#f06336</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>Q: controller.js和service.js文件越来越大怎么办?
A:所有的控制器不必都放在controllers.js这一个文件中，可以新建controllers文件夹，
然后把每个controller都建一个.js文件，同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖，第一个加载的js中模块中要加[…],其他都不需要。如：
<code class="hljs r has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">// File : /js/directives/mainDirective.jsangular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'app.directives'</span>,[]);// File : /js/directives/myGreatDirective.jsangular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'app.directives'</span>) .directive(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myGreatDirective'</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> { //<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> } });// File : /js/directives/myBetterDirective.jsangular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'app.directives'</span>) .directive(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myBetterDirective'</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> { //<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> } });<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>看angularjs-code-organization了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把[]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">angular.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">module</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fcws.controllers'</span>,[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ionic'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fcws.services'</span>]);angular.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">module</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fcws.services'</span>, []);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
可以达到和上面一样的效果，而且可以统一管理.
Q: 如何寻找优秀的范例代码?
A:目前有些ionic 的app没有进行代码混淆，至少ionic官方的ionic view没有进行代码混淆，下载他们的app，文件名改成zip，解压，所有的 www文件都在assets文件夹中，相当于开源了有木有，看看那些最优秀的practice。看中哪些优秀的app，下下来,如何在googleplay上下载？把googleplay应用的地址贴到apps.evozi中。
Q: 如何显示相对时间？
A:如几分钟前，几天前等,可以用momentjs，看这篇教程
Q:发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?
A:暂时的解决方法是，不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:
<code class="hljs mel has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">lintOptions { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">disable</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'MissingTranslation'</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">disable</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ExtraTranslation'</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>Q: 如何在列表右下方添加时间等信息?
A:span可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:
<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-item</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"item item-avatar-left "</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-repeat</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"message in messages"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"../../img/commander.jpg"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"item-note"</span>></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">message.create</span>_<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">at</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h2</span> ></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">message.name</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h2</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span> ></span> </span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">message.content</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-item</span> ></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>Q:如何回到上一页面?
A:用$ionicHistory这个模块,引入该模块后使用goBack([backCount])，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1
Q:如何关闭应用?
A:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">ionic<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.Platform</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.exitApp</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
Q: 在安卓设备上如何让title居中?
A: 在headerbar中添加align-title=”center”,如:
<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-header-bar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"bar-positive"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">align-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"center"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"title"</span>></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">username</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-header-bar</span>></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:
<code class="hljs r has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">.config(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.navBar.alignTitle(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>如果要让某一个view title居中，可以用
Q: 如何让在sidemenu中的headerbar能够显示头像等其他信息?
A: 解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:
<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-side-menu</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">side</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"left"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"bar-positive"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-list</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-item</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"item item-avatar item-positive"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"img/commander.jpg"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h2</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">" light"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"icon ion-ios-star"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">title</span>}}</span><span class="xml" style="box-sizing: border-box;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h2</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">username</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-item</span>></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>Q: ionic的subheader挡住了内容区域怎么办?
A: 解决方案是给加类has-subheader,同理也可以加has-header。如下:
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><ion-content <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"has-header has-subheader"</span>></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
Q:对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
A:可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖
Q:ionic如何处理回退按钮？例如询问用户是否真的要退出应用
A:可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。
<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicPlatform</span>.registerBackButtonAction(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> current_state_name = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span>.current.name; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(current_state_name !== <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sidemenu.post'</span> && current_state_name !== <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sidemenu.contact_town'</span> && current_state_name !== <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'sidemenu.contact_people'</span>){ <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ionicPopup</span>.confirm({ title: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'退出应用'</span>, template: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'您确定要退出xxxx吗?'</span> }).then(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(res)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (res) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//ionic.Platform.exitApp();</span> navigator.app.exitApp(); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'You are not sure'</span>); } }); e.preventDefault(); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>; }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ navigator.app.backHistory(); }},<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li></ul>Q:ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
A:在应用的注册或者登录部分，不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时，你需要把这个token放在头部中。你可以在app.js的.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401或403，跳转到重新登录页面.
<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$httpProvider</span>.interceptors.push(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$q</span>, <span class="hljs-variable" style="box-sizing: border-box;">$location</span>, User, <span class="hljs-variable" style="box-sizing: border-box;">$rootScope</span>)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> { <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'request'</span>: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(config)</span> {</span> config.headers = config.headers || {}; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (User.getToken()) { config.headers.Authorization = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Bearer '</span> + User.getToken(); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> config; }, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'responseError'</span>: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(response)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (response.status === <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">401</span> || response.status === <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">403</span>) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果之前登陆过</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (User.getToken()) { <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$broadcast</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'unAuthenticed'</span>); } } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$q</span>.reject(response); } };});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>Q:ionic如何实现搜索框内的全部清除按钮?
A:在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行:
<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"item-input-wrapper"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"icon ion-ios-search placeholder-icon"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">input</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"search"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">placeholder</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"请输入姓名前缀"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-model</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"search.key"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"icon ion-close-circled placeholder-icon"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"vertical-align: middle;"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">on-tap</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"clearSearch()"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-if</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"search.key.length"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">span</span>></span></code>
0 0
- ionic开发篇之踩坑集
- ionic开发篇之踩坑集
- ionic开发篇之踩坑集
- Ionic开发之条形码扫描
- Ionic开发之条形码扫描
- 2.ionic系列之ionic开发环境搭建(一)
- ionic开发插件之ngCordova配置安装
- Ionic开发之路（一）
- Ionic开发之路（二）
- ionic开发插件之ngCordova配置安装
- ionic开发介绍之环境搭建
- ionic开发介绍之bower 介绍
- ionic开发介绍之Gulp介绍一
- ionic开发介绍之gulp 简绍二
- ionic开发介绍之SASS介绍
- ionic入门之服务开发模式
- ionic开发
- 混合开发(Hybrid App)之 Ionic【一】-- 认识Ionic，搭建开发环境，创建项目
- oracle 维护
- df命令和du命令统计同个目录不同
- 物理层
- 图片验证码识别平台
- VS2010 Intel OpenCL安装与配置
- ionic开发篇之踩坑集
- mybatis链接多个数据源
- 北京黑马程序员javaEE第19期课程
- IDEA 安装破解版JRebel插件实现热部署记录
- Centos7 + Hadoop 3.0 伪分布式环境安装部署
- 形式化关系查询语言
- Java中数据存储位置
- E - Sudoku
- maven安装
