ionic-framework
이오니아 AngularJS 확장

비고

양식 입력

이오니아 입력은 일반적인 HTML 입력과 다르지 않지만 스타일이 다르며 지시문으로 사용됩니다. Ionic 앱에서 일반 HTML 입력을 사용할 수도 있습니다. 다음은 Ionic이 즉시 사용할 수있는 몇 가지 기본 예제입니다.

확인란 :

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

라디오 버튼:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

비녀장:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

모달 창

이오니아는 모달 윈도우를 표시하기위한 자체 확장 프로그램입니다. 모달은 <script> 태그를 사용하여 뷰에 직접 템플릿을 삽입하거나 별도의 템플릿 파일을 사용하여 만들 수 있습니다. 이 예에서 우리는 당신이 HTML 파일 이름이 가정합니다 modal-template.html 이라는 폴더에 templates . fromTemplateUrl 을 사용하여 모달 초기화 함수에서 템플리트 경로를 설정합니다.

스코프에 모달 오브젝트 만들기

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

제어 장치

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

모달 제어

그런 다음 다음 명령을 사용하여 모달을 제어 할 수 있습니다.

모달 열기

$scope.modal.show();

모달 닫기

$scope.modal.hide();

모달 제거

$scope.modal.remove();

모달 이벤트

다음과 같은 기능으로 모달 이벤트를들을 수 있습니다.

모달 숨김

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

모달이 제거되었습니다.

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});