精华内容
下载资源
问答
  • ionic Modal

    2019-10-03 11:14:50
    ionic中,modal也是添加控制器写服务的~ 在modal.html页面中增加控制器:ng-controller="aboutCtrl"记住要给这个添加控制器。头部使其关闭按钮,只需要使用ng-click = "hide()" 在app.js中初始化modal:$...

    在ionic中,modal也是添加控制器写服务的~

    在modal.html页面中增加控制器:ng-controller="aboutCtrl"
    记住要给这个添加控制器。
    头部使其关闭按钮,只需要使用ng-click = "hide()"

    在app.js中初始化modal:
    $rootScope.aboutModal = modalSvc.createModal('templates/about.html');


    在控制器下要使用:
    $scope.openAboutModal = function(){
    $rootScope.aboutModal.show();
    }

     

    modalSvc.js:
    记住在最后要返回。

    /**
     *
     *
     * 初始化:
     *      var $rootScope.oneModal = modalSvc.createModal(templateUrl);
     *
     *
     * 指定控制器
     *      <ion-view class="modal" ng-controller="loginCtrl">
     *
     *
     * 打开modal并传递数据
     *      oneModal.show(params);
     *      通过参数params可以向modal中传递数据
     *      <span>{{params.title}}</span>
     *
     *
     * 通过完成事件获得结果
     *      function onModalComplete(result) {
     *      }
     *      oneModal.show(params).then(onModalComplete);
     *      其中result 就是modal关闭时的结果,也是hide函数传回的值: hide(result)
     *      如果通过其他方式关闭modal,也会调用onModalComplete,但result为undefined
     *
     *
     * 关闭modal
     *      oneModal.hide(result)
     *      result作为modal的结果,传回调用者
     *
     *
     * 在模板中关闭modal
     *      <button ng-click="hide(true)">OK</button>
     *      <button ng-click="hide()">Cancel</button>
     *
     *
     * 指定每次modal打开时要执行的代码
     *      oneModal.scope.events.onShow = function ($scope) {}
     *
     *
     * 指定每次modal关闭时要执行的代码
     *      oneModal.scope.events.onHide = function ($scope) {}
     *
     */
    angular.module('modalSvc', ['ionic']).factory('modalSvc', [
      '$q', '$rootScope', '$ionicModal'
      , function ($q, $rootScope, $ionicModal) {
        function createModal(templateURL) {
          var modalService = {
            scope: $rootScope.$new(),
            modalWindow: null,
    
            show: function (params) {
              this.scope.q = $q.defer();
              this.scope.params = params || {};
              if (this.modalWindow) {
                var scope = this.scope;
                this.modalWindow.show().then(function () {
                  if (scope.events.onShow) {
                    scope.events.onShow(scope);
                  }
                });
              }
              return this.scope.q.promise;
            },
    
            hide: function (result) {
              if (this.modalWindow) {
                var scope = this.scope;
                this.modalWindow.hide().then(function () {
                  if (scope.events.onHide) {
                    scope.events.onHide(scope);
                  }
                });
              }
              if (this.scope.q) {
                this.scope.q.resolve(result);
                this.scope.q = undefined;
              }
            }
          };
    
          modalService.scope.events = {
            // onShow
            // onHide
          };
    
          modalService.scope.hide = function (result) {
            modalService.hide(result);
          };
    
          $ionicModal.fromTemplateUrl(templateURL, function (modal) {
            modalService.modalWindow = modal;
          }, {
            scope: modalService.scope,
            animation: 'slide-in-up'
          });
    
          return modalService;
        }
    
        return {createModal: createModal};
      }
    ]);

     

    转载于:https://www.cnblogs.com/maoyazhi/p/4462845.html

    展开全文
  • Ionic Modal

    2017-10-21 22:08:00
    Modal的使用 1、打开Modal, MyPage是一个Page页,onDidDismiss是MyPage关掉后的回调方法, data是传递过来的数据 2、MyPage 注入ViewController 然后通过view的dismiss关闭MyPage,并且传递data参数。 本文转...

    Modal的使用

    1、打开Modal,

     MyPage是一个Page页,onDidDismiss是MyPage关掉后的回调方法, data是传递过来的数据

     

    2、MyPage

    注入ViewController

    然后通过view的dismiss关闭MyPage,并且传递data参数。

     


    本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7486377.html,如需转载请自行联系原作者

    展开全文
  • ionic-Modal

    2016-09-28 15:35:00
    import {NavController,LoadingController,AlertController,ToastController,ModalController } from 'ionic-angular'; import {Register} from '../contact/register';//注册页面 并在构造函数中写 constructor...

    假如在contact.html页面上点击弹出模态框

    假如在contact.html页面上点击弹出模态框
    首先在html页面上加click事件


    <button  (click)="openRegisterPage()" outline>你还没有账户,请注册</button>

    然后在contact.ts页面引入


    import {NavController,LoadingController,AlertController,ToastController,ModalController } from 'ionic-angular';
    import {Register} from '../contact/register';//注册页面
    并在构造函数中写 constructor( public modalCtrl: ModalController) {}

    写点击的事件显示模态框


      openRegisterPage(){
        let modal = this.modalCtrl.create(Register);
        modal.present();
      }

    新建register.html  及 register.ts  页面


    register.ts 里面引入
    import {Component} from '@angular/core';

    @Component({
      templateUrl: 'build/pages/contact/register.html'
    })
    export class Register {}

    register.html页面中添加标签


    <ion-content padding>
        pages
    </ion-content>
     


    下面是关闭按钮使用
    在注册页面中点击关闭
    HTML页面
    <ion-toolbar>
        <ion-title>用户注册</ion-title>
        <ion-buttons start>
            <button (click)="dismiss()">取消</button>
        </ion-buttons>
    </ion-toolbar>
    <ion-content padding></ion-content>
    ts页面
    首先引入ViewController
    import {ViewController} from 'ionic-angular';
    然后
    export class Register {
        constructor(public viewCtrl: ViewController) {}
        dismiss(){
             this.viewCtrl.dismiss();
        }

    转载于:https://my.oschina.net/u/2612473/blog/752736

    展开全文
  • ionic3 Modal组件

    2019-02-28 15:36:00
    Modal组件主要用来弹出一些临时的框,如登录,注册的时候用 弹出页面html页面 <button ion-button small outline color="he" (click)="register()">还没有账号,点击注册</button> 弹出页面的ts...

     Modal组件主要用来弹出一些临时的框,如登录,注册的时候用

    弹出页面html页面

    <button ion-button small outline  color="he" (click)="register()">还没有账号,点击注册</button>

    弹出页面的ts文件

    import { Component } from '@angular/core';
    import { ModalController } from 'ionic-angular';
    import { RegisterPage } from '../register/register';//需要弹出的页面
    
    
    
    @Component({
      selector: 'page-contact',
      templateUrl: 'contact.html'
    })
    export class ContactPage {
    
      constructor(public modalCtrl: ModalController) {
    
      }
     
      register(){
        let modal = this.modalCtrl.create(RegisterPage);
        modal.present();
      }
    }

    被弹出页面的html(页面上设置关闭按钮用来关闭弹出页dismiss

    <ion-header>
      <ion-navbar>
        <ion-title>用户注册</ion-title>
        <ion-buttons end>
          <button ion-button clear (click)="dismiss()">
            <span showWhen="ios">取消</span>
            <ion-icon name="md-close" showWhen="android"></ion-icon>
          </button>
        </ion-buttons>
      </ion-navbar>
    
    </ion-header>
    
    <ion-content padding>
    
    </ion-content>

    被弹出页面的ts文件(ViewController来关闭当前弹出页面

    import { Component } from '@angular/core';
    import { ViewController } from 'ionic-angular';
    
    
    @IonicPage()
    @Component({
      selector: 'page-register',
      templateUrl: 'register.html'
    })
    export class RegisterPage {
    
      constructor(public viewCtrl: ViewController) {
      }
    
      dismiss(){
        this.viewCtrl.dismiss();
      }
    
    }

    弹出页面是新生成的组件的话,记得修改app.moudle.ts文件,添加如下文件

    import { NgModule, ErrorHandler } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    
    import { AboutPage } from '../pages/about/about';
    import { ContactPage } from '../pages/contact/contact';
    //引入新建的页面
    import { RegisterPage } from '../pages/register/register';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';
    
    
    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';
    
    @NgModule({
      declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        RegisterPage,//添加
        HomePage,
        TabsPage
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp)
        
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        AboutPage,
        ContactPage,
        RegisterPage,//添加
        HomePage,
        TabsPage
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
    })
    export class AppModule {}

     

    转载于:https://www.cnblogs.com/longailong/p/10450764.html

    展开全文
  • Ionic教程-modal的使用

    千次阅读 2015-08-21 12:58:39
    Ionic-modal
  • 第一步:建立一个component组件 注意:最好建立在需要弹框的底部或者同一个目录下 // 切换到我们的目录下 cd src/app/home-main/sidebar/e-...ionic g c name 第二步:在我们需要弹框的页面创建此组件 import ...
  • 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出的另一个页 面。 2、Modal 模态对话框使用 比如我们想在 modal 页面中...
  • 主要为大家详细介绍了Ionic3 UI组件之Gallery Modal的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Ionic4中使用ion-modal组件实现模态对话框。模态对话框允许我们在一个页面中弹出另一个页面。此处的另一个页面是指在当前模块下额外创建的一个页面组件。模态对话框的本质是一个组件中调用另一个组件。 二、详解 ...
  • 1、npm安装ionic-gallary-modal扩展模块 npm install ionic-gallery-modal --save 2、在app.module.ts根模块中导入图片预览模块 ionic-gallary-modal 和 浏览器手势事件模块 HAMMER_GESTURE_CONFIG import ...
  • 首先了解一下ion-modal,模态对话框,效果就是点一下...ionic g page modal 然后在这个页面中新建一个login组件 ionic g component modal/components/login 新建完以后在modal页面写一个按钮进行弹出模态对话框 然...
  • 最近做了一个项目,其中要实现这样的功能,在首页底部中间的tab弹出一个页面,而且是没有底部栏的,而不是像平常滑动的一个子页面。其实实现方法很简单,下面通过本文给大家介绍下
  • ionic 项目中添加modal的步骤流程

    千次阅读 2015-08-12 09:16:44
    1、首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动...ion-modal-view> ion-header-bar> h1 class="title">My Modal title/h1> /ion-header-bar> ion-content>
  • Ionic4版本更改之 Modal弹出与关闭

    千次阅读 2018-12-13 11:45:24
    Ionic4Beta版官方文档提供了例子代码,首先定义一个ModalPage组件,并在需要弹出的组件上...重点与Ionic3的区别在于Modal框的关闭在Ionic4中直接modalController.dismiss()关闭而不是在ModalPage中再定义一个ViewCon...
  • ionic4 ion-modal的用法

    2019-05-28 09:11:00
    import { IonInfiniteScroll, ModalController } from '@ionic/angular'; import { Router } from '@angular/router'; import { SearchmodalPage } from '../module/searchmodal/searchmodal.page'; @Component({ ...
  • ionic-animated-modal, 当动画css和离子模式满足时 我推微博动画与 @Ionicframework的模式非常有效。 在 10分钟内钩住了很多。 那么酷的https://t.co/sCHtPOSAck pic.twitter.com/wvZV5bkJtr- ( @kevincobain2
  • ionic-gallery-modal, 离子库模式( 用于显示所有照片) :这个项目不再被维护 !如果你需要一个漂亮的专业图书馆,请使用 photoswipe.js 服务。 Ionic模式它由一个模式组成,它可以帮助你制作画廊预览模式。 上次使用...
  • ionic学习--ion-modal

    2020-10-21 13:41:27
    上面的注释要仔细看看,第一个是不生效的,因为少了 .modal-wrapper, 并且要写到全局样式global.scss中去 3.传数据 先说A-B的情况 下图是A,使用componentProps属性, 下图是B,要用@Input()去接收 再说B-A的情况...
  • Ionic最佳实践-使用模态窗口modal

    千次阅读 2015-05-11 21:47:37
    Ionic中,模态窗口通过$ionicModal提供。他易于使用且非常强大,详细信息请参考$ionicModal文档。Ionic中的模态窗口可以使用模板字符串或URL创建。本文将使用URL。 模态窗口创建时绑定到一个scope,这个scope可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 784
精华内容 313
关键字:

ionicmodal