Latest web development tutorials

ionik jendela modal

$ IonicModal

$ IonicModal dapat menutupi isi utama dari antarmuka kotak pengguna.

Anda dapat menanamkan kode berikut (dalam kode sesuai dengan skenario bisnis Anda sendiri yang sesuai perubahan) dalam file indeks atau file lain. 

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

Kemudian Anda bisa dalam Controller Anda di dalam menyuntikkan $ ionicModal. Kemudian memanggil Anda hanya menulis template, menginisialisasi. Seperti dalam kode berikut: 

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
  });
});

cara 

fromTemplate(templateString, options)
parameter jenis Detil
templateString 字符串

String template sebagai jendela modal konten.

Pilihan 对象

Pilihan diteruskan ke ionicModal # menginisialisasi metode.

Pengembalian: sebuah objek, sebuah contoh dari ionicModal kontroler.

fromTemplateUrl(templateUrl, options)
parameter jenis Detil
templateUrl 字符串

Memuat url Template.

Pilihan 对象

Melewati objek dengan ionicModal # initialize metode.

Pengembalian: janji objek.Janji objek adalah spesifikasi CommonJS Kelompok Kerja, hal ini bertujuan untuk menyediakan antarmuka yang seragam untuk pemrograman asynchronous.

ionicModal

Layanan $ ionicModal instantiate.

Tip: Ketika Anda menyelesaikan setiap modul yang jelas, pastikan untuk memanggil () metode hapus untuk menghindari kebocoran memori.

CATATAN: modul dari jarak awal penyiaran 'modal.shown' dan 'modal.hidden', untuk diteruskan sebagai parameter itu sendiri.

cara 

initialize(可选)

Membuat jendela pengendali modal contoh baru.

parameter jenis Detil
Pilihan 对象

Klik salah satu pilihan objek memiliki sifat:

  • {object=} 范围 subclass berkisar. Default: $ rootScope membuat subclass.
  • {string=} 动画 dengan tampilan atau menyembunyikan animasi. Default: 'slide-in-up'
  • {boolean=} 第一个输入框获取焦点 ketika ditampilkan, pertama elemen input modal window apakah akan secara otomatis mendapatkan fokus. Default: palsu.
  • {boolean=} Apakah Tutup modal window backdropClickToClose` klik background. Default: benar. 
show()

Modal window contoh

  • Kembali Nilai: promise Janji objek, setelah selesainya animasi diselesaikan di jendela modal 
hide()

Menyembunyikan jendela modal.

  • Kembali Nilai: promise Janji objek, setelah selesainya animasi diselesaikan di jendela modal 
remove()

Hapus modal window contoh dari DOM dan bersih.

  • Kembali Nilai: promise Janji objek, setelah selesainya animasi diselesaikan di jendela modal 
isShown()
  • Pengembalian: nilai Boolean digunakan untuk menentukan jendela modal ditampilkan.

contoh

kode HTML 

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>本教程(w3big.com)</title>
    <link href="http://www.w3big.com/static/ionic/css/ionic.min.css" rel="stylesheet">
	<script src="http://www.w3big.com/static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="contact in contacts">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>
    
    <script id="templates/modal.html" type="text/ng-template">
      <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>
    </script>
    
  </body>
</html>

kode CSS 

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

kode 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();
  };

});