Open
Description
移动端开发必备的一句话
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
引入js文件和ionic的bundle文件，bundle文件里面包含了angular框架
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<link rel="stylesheet" href="ionic.css" />
如果你只使用样式不使用组件的话，那就不用写var app = angular.module("wsscat",["ionic"])，相反用组件就一定要加上去
ion-content
设置一个可以滚动的内容区域
<ion-content>
<p>我的第一个 ionic 应用。</p>
</ion-content>
配合固定的头部`<ion-header-bar>`，让内容框可以滚动可以这样写
`<ion-content class="content has-header ionic-pseudo">`
如果不让内容框滚动则这样写
`<div class="content has-header">`
下拉刷新
让ion-content拥有下拉刷新的滚动视图
<ion-refresher
pulling-text="下拉刷新..."
on-refresh="doRefresh()">
</ion-refresher>
ion-list
下拉刷新完后我们可以用ion-list
<ion-list>
<ion-item ng-repeat="item in items">{{item}}</ion-item>
</ion-list>
ui-view与ion-nav-view
当我们以这种方式写路由的时候要，注意我们可以在ion-tabs里面使用<ion-nav-view>标签代替ui-route的<div ui-view＝""></div>
.state('tabs.home', {
url: "/home",
//当一个页面有多个视图即ui-view或者ion-nav-view时候用views属性和视图的name配合指定
views:{
"home-tab":{templateUrl: "views/home.html",}
}
//相当于下面这张写法配合<div ui-view＝""></div>
//templateUrl: "views/home.html",
//controller: 'HomeTabCtrl'
})
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
<!--<div ui-view＝""></div>-->
</ion-tab>
</ion-tabs>
其实本质是父容器的ui-view分不同几份ion-nav-view来写，ion-nav-view的区别用name来区分
ionic组件里面使用ng-model
如果要在ionic里面使用ng-model获取值,比如在,中获取<input ng-model="name" />name的值，就要在name前面加上$parent，<input ng-model="$parent.name" />这样控制器才能获取name值，因为ionic组件会在控制器的作用域下创建了一个子的作用域
Metadata
Metadata
Assignees
Labels
No labels
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
[-]ionic[/-][+]ionic总结[/+]ezjason commentedon Mar 31, 2017
怒补ionic遗漏的知识点