Ионная модель
$ Ionicmodal
$ ionicmodal может скрывать поле содержимого основного интерфейса пользователя.
Вы можете встроить следующий код в свой индексный файл или другие файлы (код внутри может быть изменен в соответствии с вашим собственным сценарием бизнеса).
<script id = "my-modal.html" type = "text/ng-template"> <Ion-modal-view> <Ion-header-bar> <h1> modal title </h1> </ion-header-bar> <Ion-content> hello! </ion-content> </ion-modal-view> </script> hello!
Затем вы можете ввести $ ionicmodal в свой контроллер. Затем позвоните в шаблон, который вы только что написали, чтобы выполнить операцию инициализации. Так же, как следующий код:
Angular.Module ('testApp', ['' Ionic ']). Controller (' myController ', функция ($ acpope, $ ionicmodal) {$ ionicmodal.fromtemplateurl (' my-modal.html ', {scope: $ scope, анимация:' slide-in-up '}) modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // Очистить модальный, когда мы закончили с ним! {$ scope.modal.remove ();}); // Выполнить действие на смазке Modal $ Scope. $ ON ('modal.hidden', function () {// Выполнить действие}); // Выполнить действие на удаление модального $ scope. $ on ('modal.removed', function () {// exection action});};});метод
FromTemplate (TemplateString, Options)
| параметр | тип | Подробности |
|---|---|---|
| температура | 字符串 | Строка шаблона служит содержанием модели. |
| параметры | 对象 | Варианты передаются в метод Ионикмодала#инициализации. |
FromTemplateUrl (шаблон, опции)
| параметр | тип | Подробности |
|---|---|---|
| шаблон | 字符串 | Загрузите URL шаблона. |
| параметры | 对象 | Пропустите объект через метод иничмодала#инициализировать. |
Возврат: Объект обещания. Объект обещаний - это спецификация, предложенная рабочей группой CommonJS, с целью предоставления единого интерфейса для асинхронного программирования.
Ионикмодал
Созданный в эфире $ Ionicmodal Service.
Совет: Когда вы завершаете очистку каждого модуля, обязательно вызовите метод remove (), чтобы избежать утечек памяти.
ПРИМЕЧАНИЕ. Модуль транслирует «Modal.Shown» и «Modal.hidden» из его начального диапазона, проходящего себя в виде параметра.
метод
инициализировать (необязательно)
Создайте новый пример контроллера модели.
| параметр | тип | Подробности |
|---|---|---|
| параметры | 对象 | Объект опции имеет следующие свойства:
|
показывать()
Отображать экземпляр модели
Возвращаемое значение: Обещание объект обещания, проанализирован после того, как модель завершит анимацию
скрывать()
Скрыть модель.
Возвращаемое значение: Обещание объект обещания, проанализирован после того, как модель завершит анимацию
удалять()
Удалите экземпляр модели из DOM и очистите его.
Возвращаемое значение: Обещание объект обещания, проанализирован после того, как модель завершит анимацию
isshown ()
Возврат: логическое значение, используемое для определения того, отображается ли модель.
Пример
HTML -код
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "начальная масштаба = 1, максимальная шкала = 1, пользовательский scalbable = no, width = width"> <Title> Rookie Turnior href = "http://www.runoob.com/static/ionic/css/ionic.min.css" rel = "styleSheet"> <script src = "http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"> </hips> ng-controller = "appctrl"> <Ion-header-bar> <h1> контакты </h1> <div> <кнопка ng-click = "modal.show ()"> </button> </div> </yon-header-bar> <Ion-content> <Ion-list> <Ion-item ng-repeat = "in contact in in contact in in contact> Контакты "> {{intact.name}} </ion-item> </on-list> </on-content> <script id =" templates/modal.html "type =" text/ng-template "> <Ion-modal-view> <Ion-header-bar> <h1> new Contact </h1> <blyp ng-click = "modal.hide ()"> Cancel </button> </Ion-header-bar> <Ion-content> <div> <sabel> <pan> Имя </span> <input ng-model = "newuser.firstname" type = "text"> </label> <babel> <pran> last name </span> <pint ng-model = "label> <pap> </span> <pint> <pint ng-model =" label> <pran> type="text"></label><label><span>Email</span><input ng-model="newUser.email" type="text"></label><button ng-click="createContact(newUser)">Create</button></div></ion-content></ion-modal-view></script></body></html>CSS -код
Body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}Код JavaScript
Angular.Module ('yonicApp', ['' Ionic ']). Controller (' appctrl ', function ($ acpope, $ ionicmodal) {$ scope.contacts = [{name:' gordon freeman '}, {name:' barney calhoun '}, {name:' lamarr the headcrab ' },]; $ ionicmodal.fromtemplateurl ('templates/modal.html', {scope: $ scope}). Тогда (function (modal) {$ scope.modal = modal;}); $ scope.createcontact = function (u) {$ scope.contacts.push (unme. u.lastname}); $ scope.modal.hide ();};});Полный исходный код:
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "начальная масштаба = 1, максимальная шкала = 1, пользовательский scalbable = no, width = device-width"> </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/ion.bundle.min.mys> <//hodals> {coursor: url ('http://ionicframework.com/img/finger.png'), auto;} </style> <script> angular.module ('yonicapp', ['' Ionic ']. Controller (' appctrl ', function ($ scope, $ ionicmodal). }, {name: 'barney calhoun'}, {name: 'lamarr the Headcrab'},]; $ ionicmodal.fromtemplateurl ('templates/modal.html', {recope: $ scope}). Тогда (function (modal) {$ scope.modal = modal; $ scope.contacts.push ({name: u.firstname + '' + u.lastname}); $ scope.modal.hide ();};}); </script> </head> <body ng-controller = "appctr ng-click = "modal.show ()"> </button> </div> </oon-header-bar> <Ion-content> <Ion-list> <Ion-item ng-repeat = "Контакт в контактах"> {{intict.name}} </oom-item> </ion-list> </ion-content> <scriptmy-ilteme-ilite-iltist> type = "text/ng-template"> <Ion-модальный вид> <Ion-header-bar> <h1> новый контакт </h1> <button ng-click = "modal.hide ()"> Cancel </button> </ion-header-bar> <Ion-content> <div> <babel> <prean> first name </span> <pint ng-model = "newrire". type = "text"> </label> <backel> <pan> fastice </span> <input ng-model = "newuser.lastname" type = "text"> </label> <babel> <pan> email </span> <input ng-model = "newuser.email" type = "text"> </label> <кнопка ng-click = "createcontact (newuser)"> create </button> </div> </ион-content> </ион-модальный-View> </script> </body> </html>