ionic总结

[enoyao]

移动端开发必备的一句话
<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组件会在控制器的作用域下创建了一个子的作用域

[ezjason]

怒补ionic遗漏的知识点