ionic 플랫폼 + 부동 상자 + 대화상자

5157 단어
ionic 플랫폼
$ionicPlatform
$ionicPlatform은 현재 플랫폼을 검사하고 PhoneGap/Cordova에서 안드로이드 후퇴 단추를 덮어쓰는 데 사용됩니다.
메서드
onHardwareBackButton(callback)

하드웨어의 후퇴 단추가 있는 플랫폼은 이런 방법으로 그것을 연결할 수 있다.
매개 변수
타입
자세한 사정
callback
function
이 이벤트가 발생할 때, 리셋 함수를 터치합니다.
offHardwareBackButton(callback)

후퇴 단추의 감청 이벤트를 제거합니다.
매개 변수
타입
자세한 사정
callback
function
최초로 연결된 모니터 함수입니다.
registerBackButtonAction(callback, priority, [actionId])

등록 하드웨어 후퇴 버튼 동작.단추를 눌렀을 때 한 동작만 실행되기 때문에 이 방법은 등록된 후퇴 단추 동작이 가장 높은 우선순위를 가지도록 결정한다.예를 들어, 만약 위로 메뉴가 이미 표시된다면, 뒤로 단추는 위로 메뉴를 닫아야 한다. 페이지 보기로 돌아가거나 열린 모델을 닫는 것이 아니라.
매개 변수
타입
자세한 사정
callback
function
복귀 단추를 눌렀을 때 터치합니다. 이 모니터가 가장 높은 우선 순위를 가지고 있다면.
priority
number
가장 높은 우선 순위의 회의만 실행됩니다.
actionId(옵션)
*
이 id는 이 동작을 지정합니다.기본값: 랜덤이고 유일한 id입니다.
반환 값: 함수, 트리거된 함수, backButton Action이 로그아웃됩니다.
ready([callback])

장치가 준비되면 리셋 함수를 터치합니다.
매개 변수
타입
자세한 사정
콜백(옵션)
function=
트리거된 함수.
되돌아오기:promise 대상, 대상이 만들어진 후 해석됩니다.
ionic 부동 상자
$ionicPopover
$ionicPopover는 app 내용에 띄울 수 있는 보기 상자입니다.인스턴스[HTML 코드]

<ion-popover-view> <ion-header-bar> <h1 class="title"> </h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-popover-view>

[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은 alert(), prompt(), confirm() 등의 3가지 방법을 제공합니다.
인스턴스
[HTML 코드]
 
   
   
   
   
    <input ng-model="data.wifi" type="text" placeholder="Password"> 
  


[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: '', 
      title: 'Enter Wi-Fi Password', 
      subTitle: 'Please use normal things', 
      scope: $scope, 

      buttons: [ 
        { text: 'Cancel' }, 
        { 
          text: 'Save', 
          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'); 
    }); 

  };
});

시도해 보십시오.

좋은 웹페이지 즐겨찾기