Modal Example: Launching a modal from nav bar


#1

Hello ionic community!

I am a rookie ionic dev, I am building a simple app using the Tabs And Navigation: Nightly example as a template to how to create a tab based app.

I am slightly confused how to use modals correctly, could somone please show me a simple example using the tabs navs as a base?

I have add the controller:

app.controller('MainCtrl', function($scope, $ionicModal) {
  $scope.info = {
    name: 'Mittens Cat',
    info: 'Tap anywhere on the card to open the modal'
  }

  $ionicModal.fromTemplateUrl('info-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal
  })  

  $scope.openModal = function() {
    $scope.modal.show()
  }

  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
})

In tmeplates I have created: info-modal.html

  <ion-view view-title="info modal">
        <ion-content class="padding">
          <div class="modal">
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </div>
        </ion-content>
      </ion-view>

Now I want to open model using my info button which currently directs to a page:

<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.galleryDemo1">
    
  </button>

What i the correct way to do this?
I have looked at:
http://learn.ionicframework.com/formulas/making-modals/

But I am unsure what to do?

Any help would be greatly appreciated.

Fred


#2

Does anyone have any guides or info to point me in right direction. I posted this when the forum was down.