ionic 项目中添加modal的步骤流程
1、首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面。
1 2 3 4 5 6 7 8 | < 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页面代码,还有其他的写法如下:
1 2 3 4 5 6 7 8 9 10 | < 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 | 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中返回的值等问题。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步