Ionic Directive สำหรับ Back Button

บน Ionic Framework มี directive ให้ใช้สำหรับปุ่มย้อนกลับไปหน้าก่อนหน้านี้ อยู่แล้วคือ <ion-nav-bar> แต่เจ้าปุ่มนี้ จะอยู่ได้ใน <ion-nav-bar> เท่านั้น

<ion-nav-bar>
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

ถ้าเราต้องการสร้างปุ่มต่างหากเลย ก็สามารถใช้ <button> แล้วเขียน ng-click สำหรับเมื่อมีการกดปุ่ม แล้วให้ทำการย้อนกลับไปหน้าก่อนหน้านี้ ตัวอย่าง

<button ng-click="goBack()">Back</button>

ใน Controller เป็นดังนี้

$scope.goBack = function() {
   $ionicHistory.goBack();
}

คราวนี้ ลองมาใช้ Directive กัน
ถ้าใช้ Directive ตัว Code จะดูเป็นระเบียนขึ้นอีกเป็นกอง แล้วยังสามารถเอา Directive ไปใช้กับ HTML หน้าอื่นๆได้อีก ตัวอย่าง

<button go-back>Back</button>

ใน Direct จะเป็นดังนี้ เราจะเขียนขยายจาก module กัน

angular.module('app', [])
.directive('goBack', function ($ionicHistory) {
    return function (scope, element, attrs) {
        element.bind('click', function () {
            scope.$apply(function () {
                $ionicHistory.goBack();
            });
        });
    };
});