Pass parameters to ionic modal. Inspired by @julianpaulozzi on stackoverflow, respectfully
This is an ionic modal module you can pass any parameters.
You can access to CodePen on @julianpaulozzi's post
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>
:
: