danrasmuson/Ionic_openModal.html

## Ionic_openModal.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <!-- <script src="js/app.js"></script> -->

    <script>
      angular.module('testApp', ['ionic'])
      .controller('MyController', function($scope, $ionicModal) {
        $ionicModal.fromTemplateUrl('my-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();
        };
        //Cleanup the modal when we're done with it!
        $scope.$on('$destroy', function() {
          $scope.modal.remove();
        });
        // Execute action on hide modal
        $scope.$on('modal.hidden', function() {
          // Execute action
        });
        // Execute action on remove modal
        $scope.$on('modal.removed', function() {
          // Execute action
        });

        $scope.hi = "hello";
      });
    </script>
    <script type="text/javascript"></script>
  </head>
  <body ng-app="testApp">
    <script id="my-modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar>
          <h1 class="title">My Modal title</h1>
        </ion-header-bar>
        <ion-content>
          Hello!
        </ion-content>
      </ion-modal-view>
    </script>


    <ion-pane ng-controller="MyController">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <button ng-click="openModal()">Open Model</button>
      </ion-content>
    </ion-pane>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title></title>

	<link href="lib/ionic/css/ionic.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

	<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
	<link href="css/ionic.app.css" rel="stylesheet">
	-->

	<!-- ionic/angularjs js -->
	<script src="lib/ionic/js/ionic.bundle.js"></script>

	<!-- cordova script (this will be a 404 during development) -->
	<script src="cordova.js"></script>

	<!-- your app's js -->
	<!-- <script src="js/app.js"></script> -->

	<script>
	angular.module('testApp', ['ionic'])
	.controller('MyController', function($scope, $ionicModal) {
	$ionicModal.fromTemplateUrl('my-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();
	};
	//Cleanup the modal when we're done with it!
	$scope.$on('$destroy', function() {
	$scope.modal.remove();
	});
	// Execute action on hide modal
	$scope.$on('modal.hidden', function() {
	// Execute action
	});
	// Execute action on remove modal
	$scope.$on('modal.removed', function() {
	// Execute action
	});

	$scope.hi = "hello";
	});
	</script>
	<script type="text/javascript"></script>
	</head>
	<body ng-app="testApp">
	<script id="my-modal.html" type="text/ng-template">
	<ion-modal-view>
	<ion-header-bar>
	<h1 class="title">My Modal title</h1>
	</ion-header-bar>
	<ion-content>
	Hello!
	</ion-content>
	</ion-modal-view>
	</script>


	<ion-pane ng-controller="MyController">
	<ion-header-bar class="bar-stable">
	<h1 class="title">Ionic Blank Starter</h1>
	</ion-header-bar>
	<ion-content>
	<button ng-click="openModal()">Open Model</button>
	</ion-content>
	</ion-pane>
	</body>
	</html>