Ionic1 JS学习

Ionic1 JavaScript:

ionic组件主要是HTML和CSS组成，但部分组件也包含了JavaScript函数

ion-side-menus： 是一个带有边栏菜单的容器，可以通过点击按钮或者滑动屏幕来展开菜单。
ion-side-menu-content：展示主要内容的容器，可以通过滑动屏幕来展开menu。
ion-side-menu：存放侧边栏的容器。
ion-pane
ion-header-bar
align-title
no-tap-scroll
ion-footer-bar
ion-refresher
ion-checkbox
ion-radio
ion-toggle
ion-nav-view
ion-nav-bar
ion-nav-buttons
ion-nav-back-button
nav-clear
ion-nav-title
nav-transition
nav-direction 设置导航视图中过渡动画的方向—forward, back, enter, exit, swap。
ion-modal-view
ion-view
ion-tabs
ion-tab
ion-popover-view
ion-content
ion-list
ion-item
ion-slide-box
ion-slide
ion-spinner

$ionicPlatform$ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮

onHardwareBackButton(callback)
offHardwareBackButton(callback)
registerBackButtonAction(callback, priority, [actionId])
ready([callback])

var app = angular.module('myApp', ['ionic']);
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
         if(window.cordova && window.cordova.plugins.Keyboard) {
             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
         }
         if(window.StatusBar) {
             StatusBar.styleDefault();
         }
    });
 })

ActionSheet)
上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项,点击取消按钮或者点击空白的地方来让它消失
angular 控制器中使用 $ionicActionSheet 服务实现

ionic 背景层
在弹出框、加载框、其他弹出层中显示或隐藏背景层。
$ionicBackdrop.retain()来显示背景层
$ionicBackdrop.release()隐藏背景层
每次调用retain后，背景会一直显示，直到调用release消除背景层

$ionicLoading
ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});
show(opts)
hide()

$ionicModal
$ionicModal 可以遮住用户主界面的内容框
Angular创建模板:

<script id="mymodal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

angular.module('myApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('mymodal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
});

fromTemplate(templateString, options)
fromTemplateUrl(templateUrl, options)
initialize(可选)
show()
hide()
remove()
isShown()

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口

ion-nav-view
Angular的核心为路由服务，URLs可以用来控制视图
Ionic将最大缓存页面数为10个

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

全局禁用缓存
$ionicConfigProvider.views.maxCache(0);
在stateProvider中禁用缓存

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

通过属性禁用缓存

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

ion-nav-view
ion-nav-bar
ion-nav-buttons
ion-nav-back-button
nav-clear
ion-nav-title
nav-transition
nav-direction 设置导航视图中过渡动画的方向—forward, back, enter, exit, swap。
ion-modal-view
ion-view
ion-content

title(title) ion-nav-bar设置标题
align([direction]) 按钮的标题对齐到指定的方向
showBar(show) 设置或获取 ion-nav-bar 是否显示
showBackButton([show]) 设置或获取 ion-nav-back-button 是否显示

$ionicHistory
$ionicHistory 用于跟踪用户在 app 内的浏览记录
viewHistory() 用于查看历史记录。
currentView() app 的当前视图。
currentHistoryId() 历史堆栈的 ID，是当前视图的父类容器。
currentTitle([val]) 获取或设置当前视图的标题。
backView() 返回上次浏览的视图。
backTitle() 获取上次浏览的视图的标题。
forwardView() 返回历史堆栈中当前视图的上一个视图。
currentStateName() 返回当前状态名。
goBack([backCount]) app 回退视图，如果回退的视图存在

$ionicPopover
$ionicPopover 是一个可以浮在app内容上的一个视图框。

fromTemplate(templateString, options)
fromTemplateUrl(templateUrl, options)
参数说明：
templateString: 模板字符串。
templateUrl: 载入的模板 URL。
options: 初始化选项。

// .fromTemplateUrl() 方法
$ionicPopover.fromTemplateUrl('my-popover.html', {
   scope: $scope
}).then(function(popover) {
   $scope.popover = popover;
});

$ionicPopup
ionic 对话框服务允许程序创建、显示弹出窗口。
$ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm()

var alertPopup = $ionicPopup.alert({
      title: ' ',
      template: ''
});
var confirmPopup = $ionicPopup.confirm({
      title: '',
      template: ''
});

ion-scroll
ion-scroll 用于创建一个可滚动的容器

<ion-scroll
    [delegate-handle=""]
    [direction=""]
    [paging=""]
    [on-refresh=""]
    [on-scroll=""]
    [scrollbar-x=""]
    [scrollbar-y=""]
    [zooming=""]
    [min-zoom=""]
    [max-zoom=""]>
    ...
</ion-scroll>

ion-infinite-scroll
当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite

<ion-content ng-controller="MyController">
  <ion-infinite-scroll
    on-infinite="loadMore()"   //当滚动到底部时触发的事件。
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

$ionicScrollDelegate：
授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。
该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图

resize()
scrollTop([shouldAnimate])
scrollBottom([shouldAnimate])

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

ionic 侧栏菜单
一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

父元素<ion-side-menus>，一个中间内容 <ion-side-menu-content>，和一个或更多 <ion-side-menu> 指令

<ion-side-menus>
  <!-- 中间内容 -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- 左侧菜单 -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- 右侧菜单 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

<ion-side-menu-content
  drag-content="true">        //内容是否可被拖动。默认为true
</ion-side-menu-content>

<ion-side-menu
  side="left"                 //侧栏菜单当前在哪一边。可选的值有: 'left' 或 'right'
  width="myWidthValue + 20"   //侧栏菜单应该有多少像素的宽度, 默认为275。
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

menu-toggle 在一个指定的侧栏中切换菜单
menu-close 关闭当前打开的侧栏菜单

$ionicSideMenuDelegate
该方法直接触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用$getByHandle方法控制特定情况下的ionSideMenus
toggleLeft([isOpen])
toggleRight([isOpen])
getOpenRatio()
isOpen()
isOpenLeft()
isOpenRight()
canDragContent([canDrag])
$getByHandle(handle)$ionicSideMenuDelegate.$getByHandle(‘my-handle’).toggleLeft();

ion-slide-box
滑动框是一个包含多页容器的组件，每页滑动或拖动切换

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

ion-spinner
ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。
该图标采用的是SVG

<ion-spinner icon="spiral"></ion-spinner>    //默认用法
<ion-spinner class="spinner-energized"></ion-spinner> 

//spinner也可以使用ionic的标准颜色命名规则
spinner-light spinner-stable spinner-positive spinner-calm spinner-balanced spinner-energized spinner-assertive spinner-royal spinner-dark

ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

$ionicTabsDelegate
授权控制ionTabs指令。
该方法直接调用$ionicTabsDelegate服务，控制所有ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}
select(index, [shouldChangeHistory])
selectedIndex()
$getByHandle(handle)
$ionicTabsDelegate.$getByHandle('my-handle').select(0);