model ionik


$ionicModal

$ionicModal boleh menutup kotak kandungan antara muka utama pengguna.

Anda boleh membenamkan kod berikut dalam fail indeks anda atau fail lain (kod di dalamnya boleh ditukar mengikut senario perniagaan anda sendiri). 

<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 boleh menyuntik $ionicModal dalam Pengawal anda. Kemudian panggil templat yang baru anda tulis untuk melaksanakan operasi pemula. Seperti kod 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
  });
});

Kaedah

fromTemplate(templateString, options)
Parameter< / th>JenisButiran
templateStringString
参数类型详情
templateString字符串

模板的字符串作为模型的内容。

options对象

options 会传递到 ionicModal#initialize方法中。

Rentetan templat digunakan sebagai kandungan model.

pilihanObjekpilihan akan diserahkan kepada ionicModal# mulakan dalam kaedah.

参数类型详情
templateUrl字符串

载入模板的url。

options对象

通过ionicModal#initialize方法传递对象。

Mengembalikan:

objek, contoh pengawal ionicModal. 

fromTemplateUrl(templateUrl, options)
ParameterJenisButiran
templateUrlStringURL untuk memuatkan templat.

pilihanObjek
Lepasi objek melalui ionicModal# kaedah permulaan .

Pemulangan:

objek janji. Objek Promises ialah spesifikasi yang dicadangkan oleh kumpulan kerja CommonJS untuk menyediakan antara muka bersatu untuk pengaturcaraan tak segerak.

ionicModal

diwujudkan oleh perkhidmatan $ionicModal.

Petua: Apabila anda melengkapkan setiap pembersihan modul, pastikan anda memanggil kaedah remove() untuk mengelakkan kebocoran memori.

Nota: Modul menyiarkan 'modal.shown' dan 'modal.hidden' daripada skop awalnya, melepasi dirinya sebagai parameter.

参数类型详情
options对象

一个选项对象具有一下属性：

  • {object=} 范围 子类的范围。默认：创建一个$rootScope子类。

  • {string=} 动画 带有显示或隐藏的动画。默认：'slide-in-up'

  • {boolean=} 第一个输入框获取焦点 当显示时，模型的第一个输入元素是否自动获取焦点。默认：false。

  • {boolean=}backdropClickToClose` 点击背景时是否关闭模型。默认：true。

<🎜><🎜>Kaedah <🎜>
initialize(可选)
<🎜>Mencipta contoh pengawal model baharu. <🎜>
ParameterJenisButiran
optionsObjek<🎜>Objek pilihan mempunyai atribut berikut: <🎜> < ul class=" list-paddingleft-2">
  • <🎜>{object=} Skop Skop subkelas. Lalai: Buat subkelas $rootScope. <🎜>
  • <🎜>{string=} animasi Dengan animasi tunjukkan atau sembunyikan. Lalai: 'slide-in-up' <🎜>
  • <🎜>{boolean=} Kotak input pertama mendapat fokus apabila dipaparkan , sama ada elemen input pertama model secara automatik mendapat fokus. Lalai: palsu. <🎜>
  • <🎜>{boolean=}backdropClickToClose` Sama ada hendak menutup model apabila mengklik pada latar belakang. Lalai: benar. <🎜>
    • show()

    Tunjukkan contoh model

    • Nilai pulangan:promise objek janji, yang diselesaikan selepas model melengkapkan animasi

    hide()

    Sembunyikan model .

    • Nilai pulangan: promise objek janji, diselesaikan selepas model melengkapkan animasi 

    remove()

    Alih keluar contoh model daripada DOM dan bersihkannya naik .

    • Nilai pulangan: promise objek janji, diselesaikan selepas model melengkapkan animasi 

    isShown()

    • Pulangan: Nilai Boolean , digunakan untuk menentukan sama ada model dipaparkan.

    Contoh

    Kod 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>php中文网(php.cn)</title>
    <link href="http://www.php.cn/static/ionic/css/ionic.min.css" rel="stylesheet">
	<script src="http://www.php.cn/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>

    Kod CSS

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

    Kod JavaScript

    rreee