Ionic 坑总结

1 离线gradle构建

  http://stackoverflow.com/questions/29874564/ionic-build-android-error-when-download-gradle

myApp/platforms/android/cordova/lib/builders/GradleBuilder.js.

paste it in somewhere likes myApp\platforms\android\gradle\gradle-2.2.1-all.zip

 var distributionUrl = 'distributionUrl=../gradle-2.2.1-all.zip';


2 bower的安装及命令使用

https://segmentfault.com/a/1190000000349555


3 如果一个page有多个view需要使用:

views:{
  'side-content':{
    templateUrl:'template/content1.html',
    controller:'content1Ctrl'
  }
}

如果slidemenu替换content后无法自动滑动,重写滑动事件on-swipe-right on-swipe-left,然后通过

$ionicSideMenuDelegate控制展开与否。

4 无法替换slidemenu的content内容的话,需要替换的位置有误

<ion-side-menu-content>
    <ion-nav-view name="side-content"></ion-nav-view>

</ion-side-menu-content>

5 控制器间数据的传递与接收

  • emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data
一般在app.js中控制器的继承关系已经明了

例如:

.state('slidmenu.content1',{
父控制器:slidmenu

子控制器:content1


6 $q    promise 使用

见workspace-TestAngular   中 demo-Promise


7 页面间跳转传值

在app.js中配置参数,目标页面规定接受的参数:$stateProvider.state('page2', {params: {'data': null}});

传参:$state.go('page2', {data: 'aaa'});

目标页面控制器中接受参数:控制器注入$stateParams之后可以通过$stateParams.data来获取‘aaa’


8 AngularJS 一次技术绑定(onetime bindings)

http://www.html-js.com/article/Using-Angular-to-develop-web-application-of-AngularJS-13-in-onetime-data-binding-onetime-bindings

为了解决某些dom元素只更新一次即可,不用每次都更新,可以使用::进行一次技术绑定,提高效率,否则,每次都去检查回调,效率会降低。

  • <p>Hello {{::name}}!</p>

9 angular ---for each既可以遍历数组也可以遍历对象的key和value

见 workspace-testAngular


10 避免混淆出错的时候容易出现的问题:

顺序得一致  $state','$scope','$stateParams',function ($state,$scope,$stateParams) 否则有问题

11 angularJS translate使用
见http://www.tuicool.com/articles/zeymimB
http://zhenghaoju700.blog.163.com/blog/static/13585951820152236200650/
引入库文件
bower install angular-translate --save
bower install angular-translate-loader-static-files --save
添加依赖
var app = angular.module('myApp', ['pascalprecht.translate']);
普通配置方式
app.config(function($translateProvider) {
  $translateProvider.translations({
    "headline": "Hello there, This is my awesome app!",
    "intro": "And it has i18n support!"
  });
});
使用本地文件配置
$translateProvider.useStaticFilesLoader({
    prefix: 'lib/locale/',
    suffix: '.json'
});
$translateProvider.preferredLanguage('cn');

使用
<p class="light">{{'TEST' | translate}}</p> -----页面作为filter使用
<pre class="light" translate="TEST"></pre>  -------作为指令使用

12 ngCordova使用http://www.ionic.wang/ng_cordova-index.html


13 src绝对路径



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaoyuan1234dj/article/details/51210205
个人分类: HTML前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭