【ionic】项目中$ionicModal简单用法

html:

<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">我的模型标题</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </div>
</script>

 

js:

angular.module('testApp', ['ionic'])
    .controller('MyController', function ($scope, $ionicModal) {
        $ionicModal.fromTemplateUrl('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();
        };
        //当我们用到模型时，清除它！一定要写此，当返回上一页面，自动关闭此弹窗
        $scope.$on('$destroy', function () { 
            $scope.modal.remove();
        });
        // 当隐藏的模型时执行动作
        $scope.$on('modal.hide', function () {
            // 执行动作
        });
        // 当移动模型时执行动作
        $scope.$on('modal.removed', function () {
            // 执行动作
        });
});

 

相关资料

• $ionicModal
• $ionicModal民间