modelo iônico
$ ionicmodal
$ ionicmodal pode obscurecer a caixa de conteúdo da interface principal do usuário.
Você pode incorporar o código a seguir no seu arquivo de índice ou em outros arquivos (o código dentro pode ser alterado de acordo com o seu próprio cenário de negócios).
<script id = "my-modal.html" type = "text/ng-template"> <ion-modal-view> <on-header-Bars> <h1> meu título modal </h1> </ion-header-barba> <ion-content> Olá!
Então você pode injetar $ ionicmodal no seu controlador. Em seguida, ligue para o modelo que você acabou de escrever para executar a operação de inicialização. Assim como o seguinte código:
angular.module ('testApp', ['Ionic']). modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // limpam o modal quando acabamos com ele! $ scope. {$ scope.modal.remove ();}); // Execute a ação em ocultar $ scope.método
FromTemplate (Templatestring, Opções)
| parâmetro | tipo | Detalhes |
|---|---|---|
| templatestring | 字符串 | A sequência do modelo serve como conteúdo do modelo. |
| opções | 对象 | As opções são passadas para o método IonicModal#Initialize. |
FromTemplateurl (templateurl, opções)
| parâmetro | tipo | Detalhes |
|---|---|---|
| templateurl | 字符串 | Carregue o URL do modelo. |
| opções | 对象 | Passe o objeto através do método IonicModal#Inicialize. |
Retorno: Promise Object. O objeto de promessas é uma especificação proposta pelo Grupo de Trabalho Commonjs, com o objetivo de fornecer uma interface unificada para programação assíncrona.
Ionicmodal
Instanciado por US $ ionicmodal Service.
Dica: Ao concluir cada limpeza do módulo, certifique -se de chamar o método Remover () para evitar vazamentos de memória.
NOTA: Um módulo transmite 'modal.shown' e 'modal.hidden' a partir de seu intervalo inicial, passando como um parâmetro.
método
Inicializar (opcional)
Crie um novo exemplo do controlador de modelo.
| parâmetro | tipo | Detalhes |
|---|---|---|
| opções | 对象 | Um objeto de opção tem as seguintes propriedades:
|
mostrar()
Exibição de modelo de exibição
Valor de retorno: Promise Promise Object, analisado depois que o modelo completa a animação
esconder()
Ocultar o modelo.
Valor de retorno: Promise Promise Object, analisado depois que o modelo completa a animação
remover()
Remova a instância do modelo do DOM e limpe -o.
Valor de retorno: Promise Promise Object, analisado depois que o modelo completa a animação
Istshown ()
Retorno: valor booleano, usado para determinar se o modelo é exibido.
Exemplo
Código HTML
<html ng-App = "Ionicapp"> <Head> <meta charset = "utf-8"> <meta name = "viewport" content = "inicial-escala = 1, escala máxima = 1, user-scalable = não, width = dispositivo-width"> <título> 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/ionic.bundle.min.js"></script></head><body ng-Controller = "AppCtrl"> <ion-header-Bars> <h1> contatos </h1> <div> <botão ng-click = "modal.show ()"> </button> </div> </ion-herança-bar> <ion-content> <list> contatos "> {{contact.name}} </ion-item> </ion-list> </ion-content> <script id =" modals/modal.html "type =" text/ng-template "> <ion-modal-view> <iion-header-bar ng-click = "modal.hide ()"> cancel </butut> </ion-header-Bars> <ion-content> <div> <belt> <pan> primeiro nome </span> <input ng-model = "newUser.firstname" type = "text> </etiquet> <belod> <npan> Nome </span> </span> </spange" </spanned "</spanned" </spanned "</spanned" em spannem </spanned "</spanned" </spanned "</spanned" </spanned "</spanned" em spannem </spanned "em spannem </spanned" em spannem </spanne. inpumer "em spanned" em spanlest "em spanled" spanled "e" type = "text"> </celt> <belt> <pan> email </span> <inspira ng-model = "newUser.email" type = "text"> </elated> <button ng-click = "createContact (newUSER)"> Crie </botão> </div> </ion> </on-modal-View>Código CSS
corpo {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}Código JavaScript
Angular.Module ('Ionicapp', ['Ionic']). },]; $ ionicmodal.fromTemplateurl ('modelos/modal.html', {scope: $ scope}). }); $ scope.modal.hide ();};});Código fonte completo:
<html ng-App = "Ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "inicial-escala = 1, escala máxima = 1, user-scalable = não, width = dispositivo-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"></script><style>body {Cursor: url ('http://ionicframework.com/img/finger.png'), auto;} </style> <cript> angular.module ('Ionicapp', ['ionic']. }, {name: 'Barney Calhoun'}, {Nome: 'Lamarr the Headcrab'},]; $ ionicmodal.fromtemplateurl ('modaplates/modal.html', {scope: $ scope} então (function) {$ scope.modal = modal; $ scope.contacts.push ({nome: u.firstname + '' + u.lastName}); $ scope.modal.hide ();};}); </script> </face> <bodybroty ng-controller = "appctrl"> <nion-header> <h1> contacls <h1> contacts </h1> contacts </h1 <h1> contacts </h1 "> </h1broller </h1broller =" AppCtroller "> </headr <h1> contacts </h1> contacts </h1 <h1> contacts </h1"> </h1 "> </headr> <h1 contacts <h1-Controller =" Appctrl "> <nion> <h1> contacts <h1> ng-click = "modal.show ()"> </button> </div> </non-header-Bars> <ion-content> <ion-list> <ions-item ng-repeat = "Contact em contatos"> {{contact.name}} </iion-item> </ion-list> type="text/ng-template"><ion-modal-view><ion-header-bar><h1>New Contact</h1><button ng-click="modal.hide()">Cancel</button></ion-header-bar><ion-content><div><label><span>First Name</span><input ng-model="newUser.firstName" type = "text"> </celt> <brety> <pan> sobrenome </span> <input ng-model = "newUser.lastName" type = "text"> </label> <brety> <pan> email </span> <input ng-model = "newUser.email" type = "text"> </label> <butt> ng-click = "CreateContact (newUser)"> Crie </botão> </div> </ion-content> </ion-modal-view> </sCript> </body> </html>