Example showing Modal opening and closing automatically based on loggedIn state.
A Pen by Justin Noel on CodePen.
Created
June 19, 2014 09:29
-
-
Save four2theizz0/2b41b350df417a7e1816 to your computer and use it in GitHub Desktop.
A Pen by Justin Noel.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| A simple starting template for Ionic Development. | |
| --> | |
| <html ng-app="myApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Ionic Template</title> | |
| <link href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script> | |
| </head> | |
| <body ng-controller="MyCtrl"> | |
| <ion-header-bar title="myTitle"></ion-header-bar> | |
| <ion-content has-header="true" padding="true"> | |
| <h2>Content</h2> | |
| <button class="button" ng-click="openModal()">Open Modal</button> | |
| </ion-content> | |
| <script id="modal.html" type="text/ng-template"> | |
| <div class="modal"> | |
| <header class="bar bar-header bar-positive"> | |
| <h1 class="title">Sample Modal</h1> | |
| </header> | |
| <ion-content has-header="true" padding="true"> | |
| <p ng-repeat="data in boulderDataChanges">{{data}}</p> | |
| <button class="button" ng-click="fakeLogin()">Fake Login</button> | |
| </ion-content> | |
| </div> | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('myApp', ['ionic']) | |
| .factory('AuthService', function($rootScope) { | |
| var loggedIn=false; | |
| return { | |
| checkLogin : function() { | |
| $rootScope.$broadcast('loggedIn', { 'loggedIn' : loggedIn }); | |
| return loggedIn; | |
| }, | |
| login : function() { | |
| loggedIn = true; | |
| $rootScope.$broadcast('loggedIn', { 'loggedIn' : loggedIn }); | |
| } | |
| } | |
| }) | |
| .controller('MyCtrl', function($scope, $ionicModal, $timeout, AuthService) { | |
| $scope.myTitle = 'Template'; | |
| // Load the modal from the given template URL | |
| $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) { | |
| $scope.modal = $ionicModal; | |
| }, { | |
| // Use our scope for the scope of the modal to keep it simple | |
| scope: $scope, | |
| // The animation we want to use for the modal entrance | |
| animation: 'slide-in-up' | |
| }); | |
| $scope.openModal = function() { | |
| console.log('Opening Modal'); | |
| $scope.modal.show(); | |
| }; | |
| $scope.$on('loggedIn', function(event,message) { | |
| if(message.loggedIn === true) { | |
| console.log('LOGGED IN!'); | |
| $scope.modal.hide(); | |
| } else{ | |
| console.log('NOT LOGGED IN!'); | |
| $scope.modal.show(); | |
| } | |
| }); | |
| $scope.fakeLogin = function(){ | |
| AuthService.login(); | |
| } | |
| $timeout( function() { | |
| AuthService.checkLogin(); | |
| }, 500); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment