帮助了 AmazingCounters.com 位小伙伴

Ionic 弹出窗

Ionic弹窗服务允许程序创建、显示弹出窗口,需要用户继续响应。

弹窗系统支持更多灵活的构建alert()prompt()confirm()功能版本,以及用户习惯,除了允许查看完全自定义内容的的弹窗。

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicPopup, $timeout) {

 // 触发一个按钮点击,或一些其他目标
 $scope.showPopup = function() {
   $scope.data = {}

   // 一个精心制作的自定义弹窗
   var myPopup = $ionicPopup.show({
     template: '<input type="password" ng-model="data.wifi">',
     title: 'Enter Wi-Fi Password',
     subTitle: 'Please use normal things',
     scope: $scope,
     buttons: [
       { text: 'Cancel' },
       {
         text: '<b>Save</b>',
         type: 'button-positive',
         onTap: function(e) {
           if (!$scope.data.wifi) {
             //不允许用户关闭,除非他键入wifi密码
             e.preventDefault();
           } else {
             return $scope.data.wifi;
           }
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log('Tapped!', res);
   });
   $timeout(function() {
      myPopup.close(); //由于某种原因3秒后关闭弹出
   }, 3000);

   // 一个确认对话框
   $scope.showConfirm = function() {
     var confirmPopup = $ionicPopup.confirm({
       title: 'Consume Ice Cream',
       template: 'Are you sure you want to eat this ice cream?'
     });
     confirmPopup.then(function(res) {
       if(res) {
         console.log('You are sure');
       } else {
         console.log('You are not sure');
       }
     });
   };

   // 一个提示对话框
   $scope.showAlert = function() {
     var alertPopup = $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     });
     alertPopup.then(function(res) {
       console.log('Thank you for not eating my delicious ice cream cone');
     });
   };
 };
});

 

原文出处:http://www.ionic.wang/js_doc-index-id-52.html

posted on 2015-09-29 17:32  云的旋律  阅读(647)  评论(0编辑  收藏  举报

导航

前端攻城狮分享群