Latest web development tutorials

نافذة مشروط الأيونية

$ IonicModal

$ IonicModal يمكن أن تغطي محتويات الرئيسية من واجهة المستخدم مربع.

يمكنك تضمين التعليمات البرمجية التالية (داخل رمز وفقا لسيناريوهات الأعمال الخاصة بك تغييرات مماثلة) في ملف الفهرس الخاص بك أو ملف آخر. 

<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>

ثم يمكنك في وحدة تحكم الخاصة بك حقن داخل $ ionicModal. ثم استدعاء تكتب فقط قالب، تهيئة. كما في التعليمات البرمجية التالية: 

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

الطريق 

fromTemplate(templateString, options)
المعلمات نوع التفاصيل
templateString 字符串

قالب سلسلة باعتبارها نافذة مشروط المحتوى.

خيارات 对象

خيارات تمريرها إلى ionicModal # التهيئة الأسلوب.

العوائد: كائن مثيل تحكم ionicModal.

fromTemplateUrl(templateUrl, options)
المعلمات نوع التفاصيل
templateUrl 字符串

تحميل قالب رابط.

خيارات 对象

تمرير الكائنات التي كتبها ionicModal # التهيئة الأسلوب.

العوائد: وجوه الوعد.كائن الوعود هي مواصفات الفريق العامل CommonJS، ويهدف إلى توفير واجهة موحدة لبرمجة غير متزامن.

ionicModal

الخدمات $ ionicModal مثيل.

نصيحة: عند إتمام كل وحدة واضحة، ومن المؤكد أن الدعوة إزالة () طريقة لتجنب تسرب الذاكرة.

ملاحظة: وحدة من مجموعة الأولي من بث "modal.shown" و "modal.hidden، لتمريرها كمعلمة نفسها.

الطريق 

initialize(可选)

إنشاء الوسائط سبيل المثال تحكم نافذة جديدة.

المعلمات نوع التفاصيل
خيارات 对象

انقر فوق أحد الخيارات يعترض له خصائص:

  • {object=} 范围 تتراوح الفئات الفرعية. الافتراضي: $ rootScope خلق فئة فرعية.
  • {string=} 动画 مع عرض أو إخفاء الرسوم المتحركة. الافتراضي: "الانزلاق في متابعة '
  • {boolean=} 第一个输入框获取焦点 عند عرضها، أول عنصر المدخلات نافذة مشروط سواء للحصول على التركيز تلقائيا. الافتراضي: كاذبة.
  • {boolean=} هل أغلق النافذة مشروط backdropClickToClose` فوق الخلفية. الافتراضي: صحيح. 
show()

المثال نافذة مشروط

  • إرجاع القيمة: promise الأجسام وعد، بعد أن يتم حل الانتهاء من الرسوم المتحركة في إطار مشروط 
hide()

إخفاء إطار مشروط.

  • إرجاع القيمة: promise الأجسام وعد، بعد أن يتم حل الانتهاء من الرسوم المتحركة في إطار مشروط 
remove()

إزالة سبيل المثال إطار مشروط من DOM ونظيفة.

  • إرجاع القيمة: promise الأجسام وعد، بعد أن يتم حل الانتهاء من الرسوم المتحركة في إطار مشروط 
isShown()
  • العوائد: قيمة منطقية المستخدمة لتحديد إطار مشروط يتم عرض.

أمثلة

كود 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>

كود CSS 

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

شفرة جافا سكريبت 

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

});