이온 모델
$ IonicModal
$ IonicModal은 사용자의 기본 인터페이스의 컨텐츠 상자를 가릴 수 있습니다.
인덱스 파일 또는 기타 파일에 다음 코드를 포함시킬 수 있습니다 (내부의 코드는 자신의 비즈니스 시나리오에 따라 변경 될 수 있음).
<script id = "my-modal.html"type = "text/ng-template"> <iion-modal-view> <hon-header-bar> <h1> my modal title </h1> </is ion-header-bar> <Ion-content> hello! </ision-content> </ion-modal-view>
그런 다음 컨트롤러에 $ ionicModal을 주입 할 수 있습니다. 그런 다음 방금 작성한 템플릿을 호출하여 초기화 작업을 수행합니다. 다음 코드와 마찬가지로 :
Angular.Module ( 'testApp', [ 'Ionic']). 컨트롤러 ( 'myController', function ($ scope, $ itionicmodal) {$ itionicmodal.fromtemplateUrl ( 'my-modal.html', {spope : $ scope, aniverat : 'slide-in-up'}). modal;}); $ scope.openModal = function () {$ scope.Modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // 우리가 완료 할 때 모달을 정리하십시오! $ scope. {$ scope.modal.remove ();}); // modal $ scope를 숨기는 작업 실행 ( 'modal.hidden', function () {// execute action}); // modal $ scope를 제거하는 경우 작업 실행 ( 'modal.removed', function () {// execute action});방법
FromTemplate (Templatestring, 옵션)
| 매개 변수 | 유형 | 세부 |
|---|---|---|
| 템플릿 스트링 | 字符串 | 템플릿의 문자열은 모델의 내용으로 사용됩니다. |
| 옵션 | 对象 | 옵션은 이온 모달#초기화 메소드로 전달됩니다. |
fromtemplateUrl (templateUrl, 옵션)
| 매개 변수 | 유형 | 세부 |
|---|---|---|
| templateUrl | 字符串 | 템플릿의 URL을로드하십시오. |
| 옵션 | 对象 | 이오닉 모달#초기화 메소드를 통해 객체를 전달하십시오. |
반환 : 약속 대상. 약속 객체는 CommonJS Working Group이 제안한 사양이며, 비동기 프로그래밍을위한 통합 인터페이스를 제공 할 목적으로.
이온 모달
$ ionicModal 서비스에 의해 인스턴스화됩니다.
팁 : 각 모듈 지우기를 완료하면 메모리 누출을 피하려면 remove () 메소드를 호출하십시오.
참고 : 모듈은 초기 범위에서 'modal.hown'및 'modal.hidden'을 방송하여 매개 변수로 전달합니다.
방법
초기화 (선택 사항)
새로운 모델 컨트롤러 예제를 만듭니다.
| 매개 변수 | 유형 | 세부 |
|---|---|---|
| 옵션 | 对象 | 옵션 객체에는 다음 속성이 있습니다.
|
보여주다()
디스플레이 모델 인스턴스
반환 값 : 약속 약속 객체, 모델이 애니메이션을 완료 한 후 구문 분석
숨다()
모델을 숨기십시오.
반환 값 : 약속 약속 객체, 모델이 애니메이션을 완료 한 후 구문 분석
제거하다()
DOM에서 모델 인스턴스를 제거하고 청소하십시오.
반환 값 : 약속 약속 객체, 모델이 애니메이션을 완료 한 후 구문 분석
isshown ()
반환 : 부울 값, 모델이 표시되는지 여부를 결정하는 데 사용됩니다.
예
HTML 코드
<html ng-app = "iionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "초기-스케일 = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <title> Rookie Tutorial (runoob.com) href = "http://www.runoob.com/static/ionic/css/ionic.min.css"rel = "stylesheet"> <script src = "http://www.runoob.com/static/ionic/js/onic.bundle.min.js"</scrattic> </head> ng-controller = "appctrl"> <iron-header-bar> <h1> 접점 </h1> <div> <버튼 ng-click = "modal.show ()"> </div> </div> </ision-header-bar> <Ion-Content> <ION-List> <ION-ING-REPEAT = "Confact in Contacts "> {{contact.name}} </iion-item> </iion-list> </iion-content> <script id ="templates/modal.html "type ="text/ng-template "> <Ion-modal-view> <ION-HEADER-BAR> <H1> new Contact </h1> <버튼 ng-click = "modal.hide ()"> 취소 </button </button </button> </iion-header-bar> <iion-content> <div> <label> <label> <span> 이름 </span> <input ng-model = "newuser.firstname"type = "text"> </label> <labe> <span> <input ng-model = "news.-model" type = "text"> </label> <label> <span> 이메일 </span> <입력 ng-model = "newuser.email"type = "text"> </label> <button ng-click = "createContact (newUser)"> create </button> </div> </ion-modal-view> </html>CSS 코드
Body {cursor : url ( 'http://www.runoob.com/try/demo_source/finger.png'), auto;}자바 스크립트 코드
Angular.Module ( 'IonicApp', [ 'Ionic']). 컨트롤러 ( 'appctrl', function ($ scope, $ itionicmodal) {$ scope.contacts = [{Gordon Freeman '}, {이름 :'Barney Calhoun '}, {이름 : lamarr the headcrab' },],]; $ iNicModal.fromTemPlateUrl ( 'templates/modal.html', {scope : $ scope}). 그런 다음 (function (modal) {$ scope.modal = modal;}); $ scope.createContact = function (u) {$ scope.contacts.push (u.firstname + ' +. u.lastname}); $ scope.modal.hide ();};});완전한 출처 코드 :
<html ng-app = "iionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "Initial-Scale = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <title> </title> <link href = "http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css"rel = "stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"> {cursor : url ( 'http://ionicframework.com/img/finger.png'), auto;} </style> <cript> angular.module ( 'Ionicapp', [ 'Ionic']. controller ( 'appctrl', function ($ scope, $ iionicmodal) {$ scope. ' }, {name : 'barney calhoun'}, {이름 : 'lamarr the headcrab'},]; $ ionicmodal.fromtemplateUrl ( 'templates/modal.html', {scope : $ scope}). $ SCOPE.CONTACTS.PUSH ({이름 : U.FirstName + '' + U.LastName}); $ scope.Modal.Hide ();};};};};};}); </script> </head> <Body NG-Controller = "AppCtrl"> <ision-header-bar> <h1> contacts </h1> <div> <div> <div> ng-click = "modal.show ()" "> </button> </div> </ison-header-bar> <irion-content> <iion-list> <iion-item ng-repeat ="contacts "> {contact.name id = "templates/modal.html"type = "text/ng-template"> <iOn-modal-view> <h1> new contact </h1> <button ng-click = "modal.hide ()"> 취소 </button> </ision-header-bar> <div> <label> <label> span span> in in instal ng-model = "newuser.firstname"type = "text"> </label> <label> <span> 성 </span> <입력 ng-model = "newuser.lastname"type = "text"> </label> <label> <span> email> <input ng-model = "newuser.email"> aild "> </label"> ng-click = "CreateContact (NewUser)"> Create </button> </div> </ision-content> </iion-modal-view> </script> </body> </html>