JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css">
<div>
<div ng-app="testApp">
<button class="button" ng-click="openModal()" ng-controller="MyController">Open Modal</button>
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Richiedi un bonifico</h1>
<button ng-click="fooBar()" class="button button-clear button-primary fixed-bar-pos"><i class="ion-ios-close-outline"></i></button>
</ion-header-bar>
<ion-content ng-controller="ModalController">
<ion-header-bar align-title="center" class="bar bar-header bar-positive">
<ion-content class="padding">
<ion-list>
<ion-item ng-repeat="list in lists">
<div class="weddingListItem" ng-click="fooBar()">
<span class="title">{{list.foo}}</span>
</div>
</ion-item>
</ion-list>
</ion-content>
<button class="button button-calm" ng-click="showAlert()">Alert!</button>
<button class="button button-calm" ng-click="showAlert()">Alert!</button>
</ion-content>
</ion-modal-view>
</script>
</div>
</div>
JavaScript
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();
});
}).controller("ModalController", function($scope) {
$scope.lists = [{
foo: "CLICK ME 1"
}, {
foo: "CLICK ME 2"
}];
$scope.showAlert = function() {
alert("I'm a modal window!")
}
})