ionic $ionicModal 模态框

2019独角兽企业重金招聘Python工程师标准>>>

$ionicModal.fromTemplateUrl('modal.html', {

   scope: $scope,
   animation: 'slide-in-left'
}).then(function(modal) {
   $scope.modal = modal;

   $scope.modal.show();    // $scope.modal.remove();$scope.modal.hide();

});

<script id="modal.html" type="text/ng-template">
   <ion-modal-view>
       <ion-header-bar class="bar-stable">
           <div><button ng-click="modal_back();" class="button back-button buttons  button-clear button-dark header-item">
               <i class="icon ion-ios-arrow-back"></i>
               <span class="back-text">返回</span></button></div>
           <div class="h1 title">订单详情</div>
       </ion-header-bar>
       <ion-content id="menuByDfkInfo-list">
            ......
       </ion-content>
   </ion-modal-view>
</script>

1.声明对话框模板

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

<script id="a.html" type="text/ng-template"> <ion-modal-view> </ion-modal-view> </script>

2.创建对话框对象

服务$ionicModal有两个方法用来创建对话框对象：

fromTemplate(templateString,options) - 使符串模板用字

fromTemplateUrl(templateUrl,options) - 使用内联模板 这两个方法返回的都是一个对话框对象。

3.操作对话框对象

对象框对象有以下方法用于显示、隐藏或删除对话框：

show() - 显示对话框

hide() - 隐藏对话框

remove() - 移除对话框

isShown() - 对话框是否可视？

转载于:https://my.oschina.net/jack088/blog/395517