Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ionic总结 #19

Open
Wscats opened this issue Aug 24, 2016 · 1 comment
Open

ionic总结 #19

Wscats opened this issue Aug 24, 2016 · 1 comment

Comments

@Wscats
Copy link
Owner

Wscats commented Aug 24, 2016 •
edited

移动端开发必备的一句话
<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组件会在控制器的作用域下创建了一个子的作用域
@Wscats Wscats changed the title ionic ionic总结 Sep 29, 2016
@ezjason
Copy link

ezjason commented Mar 31, 2017

怒补ionic遗漏的知识点

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Wscats @ezjason