Ionic模态化窗口使用

- 模态化窗口的使用

• 在使用ionic开发过程中有时候我们需要使用到一些小画面，但是如果使用弹出框显示可能显示不是十分美观，这时候我们就要用到模态化窗口。模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他的用户交互行为被阻止。

• 在ionic时候在那个使用到模态化窗口需要三个步骤。

  1. 声明对话框模板
     使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板

  2. 创建对话框对象 使用服务$ionicModal有两个方法用来创建对话框对象：
     fromTemplate(templateString,options) - 使用字符串模板
     fromTemplateUrl(templateUrl,options) - 使用内联模板 这两个方法返回的都是一个对话框对象。

  3. 操作对象
     对象框对象有以下方法用于显示、隐藏或删除对话框：
     show() - 显示对话框
     remove() - 移除对话框
     isShown() - 对话框是否可视？

    <script id="test-modal.html" type="text/ng-template">       
        <ion-modal-view>
            <ion-header-bar class="bar-positive">
                <h1 class="title">模态化窗口</h1>
                <a class="button" ng-click="closeModal();">关闭</a>
            </ion-header-bar>
            <ion-content>
                内容
            </ion-content>
        </ion-modal-view>
    </script>

    //创建对话框对象
    $ionicModal.fromTemplateUrl("test-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 are 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
    });