vhsalazar / ionic-ui-modal-service

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

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>
    :
    :