Controller of modal

1

How can I specify a controller to a modal window? Is there any doc about the controller or the scope of a modal? Thx!!

PS: If only i could add global buttons to ion-nav-bar

2

By default, a modal’s controller is the controller that instantiated the modal. So in “home” with a controller called “HomeController” you defined your modal in.

If you want the modal to have it’s own controller, you can do something like this:

<div class="modal" ng-controller="myModalHasItsOwnController">
<header class="bar bar-header bar-positive">
  <h1 class="title">New Contact</h1>
  <button class="button button-clear button-positive" ng-click="closeModal()">Cancel</button>
</header>
<ion-content has-header="true" padding="true">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">First Name</span>
      <input type="text" placeholder="">
    </label>
    <label class="item item-input">
      <span class="input-label">Last Name</span>
      <input type="text" placeholder="">
    </label>
    <label class="item item-input">
      <span class="input-label">Email</span>
      <input type="text" placeholder="">
    </label>
    <button class="button button-full button-positive" ng-click="closeModal()">Create</button>
  </div>
</ion-content>
</div>
3

Thank your Canlendee!!! But how can i get the modal itself in the modal controller? For example,how “closeModal()” function knows which modal to close?

4

Two ways actually,

One is change where the new modal controller is added ( I should have done it this way to begin with):

<div class="modal">
<header class="bar bar-header bar-positive">
  <h1 class="title">New Contact</h1>
  <button class="button button-clear button-positive" ng-click="closeModal()">Cancel</button>
</header>
<ion-content has-header="true" padding="true" ng-controller="myModalHasItsOwnController">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">First Name</span>
      <input type="text" placeholder="">
    </label>
    <label class="item item-input">
      <span class="input-label">Last Name</span>
      <input type="text" placeholder="">
    </label>
    <label class="item item-input">
      <span class="input-label">Email</span>
      <input type="text" placeholder="">
    </label>
    <button class="button button-full button-positive" ng-click="closeModal()">Create</button>
  </div>
</ion-content>

The second that I “THINK” will work:

<div class="modal" ng-controller="myModalHasItsOwnController">
<header class="bar bar-header bar-positive">
  <h1 class="title">New Contact</h1>
  <button class="button button-clear button-positive" ng-click="$parent.closeModal()">Cancel</button>
</header>

I prefer the first version though. Leave the showing and hiding of the modal to the parent controller. Leave the functionality inside the new modal to the modal controller.

2 Likes
5

Wow! It works! Thank you Calendee!!!