ionic 모드 창

$ionicModal

$ionicModal은 사용자 메인 인터페이스의 내용 상자를 가릴 수 있습니다.너는 너의 index 파일이나 다른 파일에 다음 코드를 삽입할 수 있다. (안의 코드는 너의 업무 상황에 따라 상응하는 변화를 할 수 있다.)

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

그리고 Controller에 $ionicModal을 주입할 수 있습니다.그리고 방금 쓴 템플릿을 호출해서 초기화합니다.다음 코드와 같습니다.

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) { 
  $ionicModal.fromTemplateUrl('my-modal.html', { 
    scope: $scope, 
    animation: 'slide-in-up' 
  }).then(function(modal) { 
    $scope.modal = modal; 
  }); 
  $scope.openModal = function() { 
    $scope.modal.show(); 
  }; 
  $scope.closeModal = function() { 
    $scope.modal.hide(); 
  }; 
  //Cleanup the modal when we're done with it! 
  $scope.$on('$destroy', function() { 
    $scope.modal.remove(); 
  }); 
  // Execute action on hide modal 
  $scope.$on('modal.hidden', function() { 
    // Execute action
  }); 
  // Execute action on remove modal 
  $scope.$on('modal.removed', function() { 
    // Execute action 
  });
});

메서드

fromTemplate(templateString, options)

매개 변수
타입
자세한 사정
templateString
문자열
템플릿의 문자열은 모드 창의 내용으로 사용됩니다.
options
대상
options는 ionicModal#initialize 메서드에 전달됩니다.
되돌아오기: 대상, ionicModal 컨트롤러의 실례.

fromTemplateUrl(templateUrl, options)

매개 변수
타입
자세한 사정
templateUr
문자열
템플릿의 URL을 불러옵니다.
options
대상
ionicModal#initialize 방법을 사용하여 객체를 전달합니다.
반환:promise 객체.Promises 대상은 CommonJS 작업팀이 제시한 규범으로 비동기 프로그래밍에 통일된 인터페이스를 제공하기 위한 것이다.

ionicModal

$ionicModal 서비스에서 실례화합니다.알림: 모든 모듈을 제거할 때 메모리 유출을 피하기 위해remove () 방법을 사용해야 합니다.주의: 모듈은 초기 범위에서'modal을 방송합니다.shown'및'modal.hidden ', 자신을 매개 변수로 전달합니다.
메서드

initialize(  )

새 모드 창 컨트롤러 예시를 만듭니다.
매개 변수
타입
자세한 사정
options
대상
하나의 옵션 대상은 속성을 가지고 있습니다:\{object=} 범위 하위 클래스의 범위입니다.기본값: $rootScope 하위 클래스를 만듭니다.\{string=} 애니메이션에는 표시되거나 숨겨진 애니메이션이 있습니다.기본값:'slide-in-up'{boolean=} 첫 번째 입력 상자에서 초점을 가져옵니다. 표시할 때 모드 창의 첫 번째 입력 요소가 자동으로 초점을 가져올지 여부입니다.기본값: false.{boolean=} backdropClickToClose` 배경을 눌렀을 때 모드 창을 닫을지 여부입니다.기본값: true

show()

모드 창 인스턴스 표시

반환값:promise promise 대상, 모드 창에서 애니메이션을 완성한 후 해석

hide()

모드 창을 숨깁니다.

반환값:promise promise 대상, 모드 창에서 애니메이션을 완성한 후 해석

remove()

DOM에서 모드 창 인스턴스를 제거하고 정리합니다.

반환값:promise promise 대상, 모드 창에서 애니메이션을 완성한 후 해석

isShown()

반환: 브리 값으로 모드 창이 표시되는지 여부를 판단합니다.

인스턴스

[HTML 코드]

 
   
     
     
        (runoob.com) 
     
     
   

   

     
      Contacts 
       
         
       
     

     
       
         
          {{contact.name}} 
         
       
     

     
      <ion-modal-view> 

        <ion-header-bar class="bar bar-header bar-positive"> 
          <h1 class="title">New Contact</h1> 
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button> 
        </ion-header-bar> 

        <ion-content class="padding"> 
          <div class="list"> 

            <label class="item item-input"> 
              <span class="input-label">First Name</span> 
              <input ng-model="newUser.firstName" type="text"> 
            </label> 

            <label class="item item-input"> 
              <span class="input-label">Last Name</span> 
              <input ng-model="newUser.lastName" type="text"> 
            </label> 

            <label class="item item-input"> 
              <span class="input-label">Email</span> 
              <input ng-model="newUser.email" type="text"> 
            </label> 

            <button class="button button-full button-positive" ng-click="createContact(newUser)">
              Create
            </button> 

          </div> 
        </ion-content> 

      </ion-modal-view>

[CSS 코드]

body { 
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

[JavaScript 코드]

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) { 
  $scope.contacts = [ 
    { name: 'Gordon Freeman' }, 
    { name: 'Barney Calhoun' }, 
    { name: 'Lamarr the Headcrab' }, 
  ]; 
  $ionicModal.fromTemplateUrl('templates/modal.html', { 
    scope: $scope 
  }).then(function(modal) { 
    $scope.modal = modal; 
  }); 
  $scope.createContact = function(u) { 
    $scope.contacts.push({ name: u.firstName + ' ' + u.lastName }); 
    $scope.modal.hide(); 
  };
});

시도해 보십시오.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ionic 모드 창

ionic 모드 창

$ionicModal

ionicModal

인스턴스

Contacts

좋은 웹페이지 즐겨찾기