การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10

06 October 2014 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

ionicframework

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework

การใช้งาน modal ใน ionicframework จะคล้ายกับการแสดงหน้าต่างเพจ หรือแท็บชั่วคราว

มาอยู่ด้านบนของหน้าทำงานหลัก เพื่อทำงานอย่างหนึ่งอย่างใดเฉพาะ และปิดไปเมื่อจบการทำงาน

โดยรูปแบบการใช้งาน modal จะใช้แท็ก <ion-modal-view> คลุมในส่วนของ

เนื้อหาที่ต้องการแสดง เช่น

  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>

การเรียกใช้งาน modal สามาระเรียกใช้งานได้แบบ string และ url

ในที่นี้จะใช้เป็นแบบ url หรือเรียกผ่านไฟล์ template

โดยเรากำหนดชื่อว่า modal.html

มาดูโครงสร้างไฟล์ทั้งหมด สำหรับประกอบคำอธิบาย ว่ามีไฟล์อะไรบ้าง

index.html

app.js

tpl/aboutus.html

tpl/contactus.html

tpl/welcome.html

tpl/modal.html

หากใครยังไม่เข้าใจการใช้งาน template ดูเนื้อหาที่เกี่ยวข้องได้ที่

การใช้งาน template ใน ionicframework ตอนที่ 4

http://www.ninenik.com/content.php?arti_id=539 via @ninenik

มาไล่ดูโค้ดตัวอย่างไฟล์ทั้งหมดคร่าวๆ กัน (ไม่ได้อธิบายอะไรเพิ่มให้ดูโครงสร้างเท่านั้น)

ไฟล์ index.html

<!DOCTYPE html>
<html ng-app="myIonicApp"> 
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="css/ionic.css" rel="stylesheet">
        <script type="text/javascript" src="js/ionic.bundle.js"></script>  
        <script type="text/javascript" src="app.js"></script>
        <title>My Ionic 3</title>
    </head>
    <body ng-controller="myIonicHome">
  
 
      <ion-side-menus>  
        <!-- Center content -->  
        <ion-side-menu-content>  
               
            <ion-nav-bar class="bar bar-header bar-assertive">
              <ion-nav-back-button class="button-clear">
                <i class="ion-arrow-left-c"></i> Back
              </ion-nav-back-button>                     
            </ion-nav-bar>             
            <ion-nav-view animation="slide-left-right">

            </ion-nav-view>
             
        </ion-side-menu-content>  
  
        <!-- Left menu -->  
        <ion-side-menu side="left">  
            <ion-header-bar class="bar bar-header bar-assertive">  
                <h1 class="title">Menu</h1>  
            </ion-header-bar>  
            <ion-content>  

            <div class="list">
                <a nav-clear nav-clear menu-close class="item item-icon-left" href="#/">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
                    <i class="icon ion-at"></i>
                    About Us
                </a>
                <a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
                    <i class="icon ion-email"></i>
                    Contact Us
                    <i class="icon ion-ios7-telephone-outline"></i>
                </a>
            </div>              
                                                      
            </ion-content>  
        </ion-side-menu>  
  
    </ion-side-menus>  
   
    </body>
</html>

ไฟล์นี้เราจะใช้โครงสร้างแบบมี sidemenu ด้านซ้าย

เพื่อลิ้งค์ไปหน้าอื่น และจำลองให้เห็นการทำงานของ event ใน modal ด้วย

ไฟล์ welcome.html

<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">My Ionic</h1>  
<button ng-click="openModal()" class="button">Edit</button>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

  
<div class="list card">

  <div class="item item-body">
   <h2>Welcome</h2>
    <p>
    This is welcome.html template
    </p>
  </div>

</div>            
    
</ion-content>

สำหรับไฟล์นี้ จะเป็นไฟล์ที่เรามีการเรียกใช้งาน modal โดยเราจะเพิ่มปุ่มคำว่า

edit ไปที่มุมบนขวาของ header พอกด ก็จะไปเรียกใช้งานฟังก์ชั่น openModal()

ไฟล์ modal.html

    <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-energized">
            <h1 class="title">ionic modal</h1>
            <button ng-click="closeModal()" class="button icon ion-ios7-close-outline"></button>
        </ion-header-bar>
        <ion-content class="scroll-content ionic-scroll has-header">

        <br>
        model content here
        <br>
        click exit button to close modal
       
        </ion-content>
  </ion-modal-view>

หน้าไฟล์ modal.html ก็จะเหมือนหน้าอื่นๆ แต่จะมีการครอบด้ววยแท็ก

<ion-modal-view> เพื่อกำหนดให้เป็นเนื้อหา modal โด้วยเฉพาะ ในไฟล์

ก็จะมีโค้ดปุ่มสำหรับ ปิด model ด้วยการเรียกใช้งานฟังก์ชั่น closeModal()

ไฟล์ aboutus.html

<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">About Us</h1>  
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

<div class="list card">

  <div class="item item-body">
   <h2>About Us</h2>
    <p>
      This is aboutus.html template
    </p>
  </div>

</div>   
    
</ion-content>

ไฟล์ contactus.html

<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">Contact Us</h1>  
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  
<div class="list card">

  <div class="item item-body">
   <h2>Contacuts</h2>
    <p>
      This is contactus.html template
    </p>
  </div>

</div>   
</ion-content>

ส่วนสำคัญไฟล์ app.js คำอธิบาย แสดงในโค้ด

angular.module("myIonicApp", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('intro', {  // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
        url: '/',  // ถ้าลิ้งไปที่ url / 
        templateUrl: 'tpl/welcome.html',  // ให้ไปเรียกไฟล์ welcome.html มาแสดง
        controller: 'welcomeCtrl'  // พร้อมสร้าง controller ชื่อ myIonicHome
    })
     .state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
        url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        controller: 'aboutusCtrl'
    })   
     .state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
        url: '/contactus',
        templateUrl: 'tpl/contactus.html',
        controller: 'contactusCtrl'
    })          
    $urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ  / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ   มีการส่งค่า $ionicModal เพื่อใช้งาน modal
.controller("welcomeCtrl",function($scope,$ionicModal){ 

    // สร้าง modal controller จากไฟล์ template และกำหนด options
    $ionicModal.fromTemplateUrl('tpl/modal.html', {
        scope: $scope, // สร้าง child scope ของ rootScope เพื่อใช้งาน
        focusFirstInput:false, // ถ้าใน modal มี input textbox ให้โฟกัสไปที่ input นั้น เมื่อเปิด modal มา  ค่าเริ่มต้นใช้ false
        backdropClickToClose:true, // ให้ปิด modal ได้ด้วยการกดไปที่ พื้นของ backdrop คล้ายพื้นหลังสีทึบๆ
        hardwareBackButtonClose:true, // ให้ปิด modal ได้ด้วยปุ่ม back ที่เครื่อง
        animation: 'slide-in-up'  // รูปแบบการแสดงการเคื่อนไหว 
    }).then(function(modal) { // คืนค่าเป็น object  controller เพื่อใช้งาน
        $scope.modal = modal;  // เก็บค่าในตัวแปร $scope.modal 
    });

    // สร้างฟังก์ชั่น สำหรับแสดง modal
    $scope.openModal = function() {
        $scope.modal.show();  // เรียกใช้ method ของ ionicmodal ในการแสดง modal
        console.log("modal show");
        console.log($scope.modal.isShown());
        // $scope.modal.isShown() เป็น method สำหรับเช็คว่า modal มีการแสดงอยู่หรือไม่ ค่าเป็น true หรือ false
//        if($scope.modal.isShown()){ // ถ้า modal แสดงอยู่
//          //  คำสั่งทำงาน
//        }
    };

    // สร้างฟังก์ชั่น สำหรับปิด modal
    $scope.closeModal = function() {
        $scope.modal.hide(); // เรียกใช้ method ของ ionicmodal ในการปิด modal
        console.log("modal hide");
        console.log($scope.modal.isShown());
    };

    // อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
    // เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
        console.log("modal destroy");
    });

    // event เมื่อมีการ  hide modal เช่นจากคำสั่ง $scope.modal.hide(); หรือคำสั่ง $scope.modal.remove();
    $scope.$on('modal.hidden', function() {
        // คำสั่งที่ต้องการทำงาน
        console.log("modal hidden");
    });

    // event เมื่อมีการ removed modal เช่น จากคำสั่ง $scope.modal.remove();
    $scope.$on('modal.removed', function() {
        // คำสั่งที่ต้องการทำงาน
        console.log("modal remove");
    });    
    
})
.controller("aboutusCtrl",function($scope){ 

})
.controller("contactusCtrl",function($scope){ 

})
.controller("myIonicHome",function($scope){ 

});

ในไฟล์ app.js เราจะได้รู้จักกับ method ต่างๆ ของ modal

เช่น

show() แสดง modal

isShow() ใช้ตรวจสอบว่า ขณะนี้ modal แสดงอยู่หรือไม่ true / false

hide() ปิดหรือซ่อน modal

remove() ปิด และล้างค่า modal ทำให้ไม่สามารถใช้งานได้อีก จนกว่า มีการเรียกใช้งานใหม่ เช่น ไปหน้าอื่นและกลับมาอีกครั้ง สั่งเกตว่า ionic จะแนะนำให้เราทำการ remove modal เมื่อมีการเปลี่ยนไปหน้าอื่นด้วยคำสั่ง

    // อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
    // เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
        console.log("modal destroy");
    });

เพื่อเป็นการป้องกันการใช้งาน memory มากเกินจำเป็น

ตัวอย่างการทำงานและรูปแบบ ของ modal

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ