阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 对话框

      $ionicPopup

      ionic 对话框服务允许程序创建、显示弹出窗口。

      $ionicPopup 提供了 3 个方法:alert(), prompt(), 以及 confirm() 。

      实例

      HTML 代码

      angular.module('ionicApp', ['ionic'])
      .controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){
      
        $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
          scope: $scope
        });
        // .fromTemplate() 方法
        var template = '<ion-popover-view><ion-header-bar> <h1 class="title">我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
            $scope.popover = $ionicPopover.fromTemplate(template, {
          scope: $scope
        });
      
      
      
        $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() {
          // 执行代码
        });
      
      }])
      

      JavaScript 代码

      angular.module('mySuperApp', ['ionic'])
      .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
      
       // Triggered on a button click, or some other target
       $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);
        };
         //  confirm 对话框
         $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');
             }
           });
         };
      
         //  alert(警告) 对话框
         $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');
           });
         };
      });
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录