Pass parameters to ionic modal. Inspired by @julianpaulozzi on stackoverflow
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
ionic.ui.modalService.js

README.md

ionic-ui-modal-service

Pass parameters to ionic modal. Inspired by @julianpaulozzi on stackoverflow, respectfully

What is this?

This is an ionic modal module you can pass any parameters.

Demo?

You can access to CodePen on @julianpaulozzi's post

Usage

Load the js file in your index.html

<script src="js/ionic.ui.modalService.js"></script>

Load the module

angular.module("starter", ["ionic", "ionic.ui.modalService"])

Make your modals service. Here it is named myModals

(->
  "use strict"
  myModals = ["appModalService", (appModalService) ->
    showYourModal = (data) ->
      appModalService.show("templates/yourModalTemplate.html", "YourModalCtrl as vm", data)

    service = {
      showYourModal: showYourModal
    }
  ]

  angular
  .module("starter")
  .factory("myModals", myModals)
)()

Call the service in your controller. YourController is a controller of where your modal will be opened

YourController = (myModals) ->
  vm = @
  vm.openMyModal = (data) ->
    if data
      myModals.showYourModal(data)
    return
  return
<ion-view>
  <ion-content ng-controller="YourController as yourCtrl">
    <button class="button" on-click="yourCtrl.showYourModal(somedata)">
    :
    :

And here is an example of modal itself

YourModalCtrl = (parameters) ->
  vm = @
  vm.data = parameters

  vm.closeMyModal = (result) ->
    if result
      vm.closeModal(result)
    return

  return

templates/yourModalTemplate.html

<div class="modal">
  <ion-header-bar class="bar bar-header bar-light">
    <button class="button btn-done" ng-click="vm.closeMyModal(vm.data)">Close</button>
  </ion-header-bar>
  <ion-content class="content list modal-list">
    <div class="item item-text-wrap text-left">{{vm.data.name}}</div>
    :
    :