Skip to content

Instantly share code, notes, and snippets.

@kinumi

kinumi/01 MyModalService.ts

Created September 12, 2015 11:49
Show Gist options
  • Save kinumi/6a57efc65b24a4539ed8 to your computer and use it in GitHub Desktop.
Save kinumi/6a57efc65b24a4539ed8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
01 MyModalService.ts
/// <reference path='../../typings/tsd.d.ts' />
/**
* Modal Service
*
* usage:
* MyModal.show('<templateUrl>', '<controllerName> or <controllerName as ..>', <parameters obj>)
* .then(function(result) {
* // result
* }, function(err) {
* // error
* });
*/
var app = angular.module('app');
app.factory('MyModal', ($ionicModal, $q, $rootScope, $controller) => {
return new MyModalService($ionicModal, $q, $rootScope, $controller);
});
interface MyModalScope extends ng.IScope {
modal: ionic.modal.IonicModalController;
openModal();
closeModal(any);
}
class MyModalService {
private ionicModal: ionic.modal.IonicModalService;
private q: ng.IQService;
private rootScope: ng.IRootScopeService;
private controller: ng.IControllerService;
constructor($ionicModal: ionic.modal.IonicModalService, $q: ng.IQService, $rootScope: ng.IRootScopeService, $controller: ng.IControllerService) {
this.ionicModal = $ionicModal;
this.q = $q;
this.rootScope = $rootScope;
this.controller = $controller;
}
public show(templateUrl: string, controllerName: string, parameters: any) {
// Create a new scope for modal
var modalScope: MyModalScope = <MyModalScope>this.rootScope.$new();
// Create and show a new ionicModal
var deferred = this.q.defer();
this.ionicModal.fromTemplateUrl(templateUrl, {
scope: modalScope,
animation: 'slide-in-up'
}).then((modal) => {
// Setup the modal scope
modalScope.modal = modal;
modalScope.openModal = function() {
modalScope.modal.show();
};
modalScope.closeModal = function(result) {
deferred.resolve(result);
modalScope.modal.hide();
};
modalScope.$on('modal.hidden', (thisModal) => {
var currentScope: MyModalScope = <MyModalScope>thisModal.currentScope;
if (currentScope) {
if (modalScope.$id === currentScope.$id) {
deferred.resolve(null);
currentScope.$destroy();
if (currentScope.modal) {
currentScope.modal.remove();
}
}
}
});
// Invoke the controller
var locals = { '$scope': modalScope, 'parameters': parameters };
var ctrlInstance = this.controller(controllerName, locals);
if (this.isControllerAs(controllerName)) {
ctrlInstance.openModal = modalScope.openModal;
ctrlInstance.closeModal = modalScope.closeModal;
}
// Show the modal
modalScope.modal.show();
}, (err) => {
deferred.reject(err);
});
return deferred.promise;
}
private isControllerAs(controllerName: string) {
var fragment = controllerName.trim().toLowerCase().split(/\s+/);
return (fragment.length === 3 && fragment[1] === 'as');
}
}
Raw
02 modules.ts
/// <reference path='../typings/tsd.d.ts' />
/// <reference path='lib/MyModalService.ts' />
var app = angular.module('app', ['ionic']);
app.run(function($ionicPlatform: ionic.platform.IonicPlatformService) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
window.StatusBar.styleDefault();
}
});
});
app.controller('TestAppCtrl', function($scope, MyModal) {
$scope.test1 = function() {
MyModal.show('test1.html', 'ModalCtrl1 as vm', {});
};
$scope.test2 = function() {
MyModal.show('test2.html', 'ModalCtrl2', {});
};
});
app.controller('ModalCtrl1', function() {
this.hello = 'Hello from Controller!!'
});
app.controller('ModalCtrl2', function($scope) {
$scope.hello = 'Hello from $scope!!'
});
Raw
03 index.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="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>
</head>
<body ng-app="app">
<ion-pane ng-controller="TestAppCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button button-block" ng-click="test1()">controller as</button>
<button class="button button-block" ng-click="test2()">$scope</button>
</ion-content>
</ion-pane>
</body>
</html>
Raw
04 test1.html
<ion-modal-view>
<ion-content class="padding">
<p>{{vm.hello}}</p>
<button class="button button-block" ng-click="vm.closeModal({})">Close!</button>
</ion-content>
</ion-modal-view>
Raw
05 test2.html
<ion-modal-view>
<ion-content class="padding">
<p>{{hello}}</p>
<button class="button button-block" ng-click="closeModal({})">hoge</button>
</ion-content>
</ion-modal-view>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment