ionic 项目中添加modal的步骤流程

1、首先在templates文件夹下面定义一个新页面，xxx.html，template文件夹在空项目里面是没有的，需要手动添加一个，放在WWW文件夹下面。

<ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
</ion-modal-view>

　　

上面的是官网的HTML页面代码，还有其他的写法如下：

<ion-view class="modal" ng-controller="creatUserCtrl">
    <ion-header-bar class="head">
        <h1 class="title">创建用户</h1>

        <div class="primary-buttons">
            <button class="button button-clear icon ion-ios-arrow-left" ng-click="hide()"
                    style="color: #ffffff"></button>
        </div>
    </ion-header-bar>
<ion-view>

　　

根据所建项目的不同来分情况使用

2、在你需要出现modal的页面控制器里，写上如下js代码：

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) { //这里记得添加依赖项
  $ionicModal.fromTemplateUrl('my-modal.html', {  //这个html是自己定义的modal页面
    scope: $scope,
    animation: 'slide-in-up'                      //modal出现的方式是从下往上
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {                 //定义一个函数来触发modal
    $scope.modal.show();
  };
});

　　

3、在以上2里面所用到的都是基础的modal的一些方法，具体在项目中要想实现的效果可以查看官网，我在实战项目中遇到的有向modal传值，获取modal中返回的值等问题。

转载于:https://www.cnblogs.com/xiaojun-zxj/p/4723212.html