การใช้งาน ionicbackdrop ใน ionicframework ตอนที่ 11

$ionicBackdrop.retain();

$ionicBackdrop.release();

// ส่งค่า $ionicBackdrop เพื่อใช้งาน backdrop
.controller("aboutusCtrl",function($scope,$timeout,$ionicBackdrop){ 
     
    //สร้างฟังก์ชัน action เพื่อเรียกใช้งาน backdrop
    $scope.action = function() {
        $ionicBackdrop.retain();  // ใช้ method แสดง backdrop
        $timeout(function() { // ตั้งเวลาให้ยกเลิกใน 3 วินาที
            $ionicBackdrop.release(); // ใช้ method ยกเลิก backdrop
        }, 3000);  // ในเวลา 3 วินาที
    };
    $scope.action();          // เรียกใช้งาน ฟังก์ชั่น
    
})

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");
    });    
    
})
// ส่งค่า $ionicBackdrop เพื่อใช้งาน backdrop
.controller("aboutusCtrl",function($scope,$timeout,$ionicBackdrop){ 
     
    //สร้างฟังก์ชัน action เพื่อเรียกใช้งาน backdrop
    $scope.action = function() {
        $ionicBackdrop.retain();  // ใช้ method แสดง backdrop
        $timeout(function() { // ตั้งเวลาให้ยกเลิกใน 3 วินาที
            $ionicBackdrop.release(); // ใช้ method ยกเลิก backdrop
        }, 3000);  // ในเวลา 3 วินาที
    };
    $scope.action();          // เรียกใช้งาน ฟังก์ชั่น
    
})
.controller("contactusCtrl",function($scope){ 

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

});