ionic 平台+浮动框+对话框

ionic 平台

$ionicPlatform

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

方法

onHardwareBackButton(callback)

有硬件的后退按钮的平台，可以用这种方法绑定到它。

参数	类型	详情
callback	function	当该事件发生时，触发回调函数。

offHardwareBackButton(callback)

移除后退按钮的监听事件。

参数	类型	详情
callback	function	最初绑定的监视器函数。

registerBackButtonAction(callback, priority, [actionId])

注册硬件后退按钮动作。当点击按钮时，只有一个动作会执行，因此该方法决定了注册的后退按钮动作具有最高的优先级。
例如，如果一个上拉菜单已经显示，后退按钮应该关闭上拉菜单，而不是返回一个页面视图或关闭一个打开的模型。

参数	类型	详情
callback	function	当点击返回按钮时触发，如果该监视器具有最高的优先级。
priority	number	仅最高优先级的会执行。
actionId(可选)	*	该id指定这个动作。默认：一个随机且唯一的id。

返回值: 函数，一个被触发的函数，将会注销 backButtonAction。

ready([callback])

设备准备就绪，则触发一个回调函数。

参数	类型	详情
callback(可选)	function=	触发的函数。

返回: promise对象, 对象被构造成功后得到解析。

ionic 浮动框

$ionicPopover

$ionicPopover 是一个可以浮在app内容上的一个视图框。
实例
【HTML 代码】

<p>
  <button ng-click="openPopover($event)">打开浮动框</button>
</p>
<script id="my-popover.html" type="text/ng-template">
  <ion-popover-view> 
    <ion-header-bar> 
      <h1 class="title">我的浮动框标题</h1> 
    </ion-header-bar> 
    <ion-content> Hello! </ion-content>
  </ion-popover-view>
</script>

【JavaScript 代码】

angular.module('ionicApp', ['ionic'])
.controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){ 

  $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', { 
    scope: $scope 
  }); 

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

  $scope.openPopover = function($event) { 
    $scope.popover.show($event); 
  }; 
  $scope.closePopover = function() { 
    $scope.popover.hide(); 
  }; 

  // 清除浮动框 
  $scope.$on('$destroy', function() { 
    $scope.popover.remove(); 
  }); 
  // 在隐藏浮动框后执行 
  $scope.$on('popover.hidden', function() { 
    // 执行代码 
  }); 
  // 移除浮动框后执行 
  $scope.$on('popover.removed', function() { 
    // 执行代码 
  });
}])

尝试一下 »

ionic 对话框

$ionicPopup

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

实例

【HTML 代码】

<body class="padding" ng-controller="PopupCtrl"> 
  <button class="button button-dark" ng-click="showPopup()"> 
    弹窗显示 
  </button> 
  <button class="button button-primary" ng-click="showConfirm()"> 
    确认对话框 
  </button> 
  <button class="button button-positive" ng-click="showAlert()"> 
    警告框 
  </button> 
  <script id="popup-template.html" type="text/ng-template"> 
    <input ng-model="data.wifi" type="text" placeholder="Password"> 
  </script>
</body>