hi, setting up authentication and want to save a auth_token into localStorage. If that token is null I want a modal to come up forcing them to register/login.
The Modal documentation tells you how to call a modal by ng-click=“openModal()” but how do I call in a script. I already tried adding the modal code to my AppCtrl and the below to the app.html template, which throws no errors but doesn’t make the modal show.
<nav-page id="app-page" ng-controller="AppCtrl">
<script>
if (!localStorage.auth_token) {
$scope.modal.show();
}
</script>
.controller('AppCtrl', function($scope, Modal) {
// Main app controller, empty for the example
Modal.fromTemplateUrl('templates/login.html', function(modal) {
$scope.modal = modal;
}, {
// 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() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
})
Hey @ajbraus, in this case, I recommend using the $rootScope and triggering/listening for an authentication event which you can then use to pop open your modal.
So, you might have something like this (untested):
angular.module('myapp', ['ionic'])
.factory('Auth', function($rootScope) {
return {
checkLogin: function() {
// Check if logged in and fire events
if(this.isLoggedIn()) {
$rootScope.$broadcast('app.loggedIn');
} else {
$rootScope.$broadcast('app.loggedOut');
}
},
isLoggedIn: function() {
// Check auth token here from localStorage
},
login: function(user, pass) {
// Do the login
// When done, trigger an event:
$rootScope.$broadcast('app.loggedIn');
},
logout: function(user, pass) {
// Same thing, log out user
$rootScope.$broadcast('app.loggedOut');
}
})
.controller('MyCtrl', function($scope, Auth) {
$scope.$on('app.loggedOut', function(e) {
// Show the modal here
});
Auth.checkLogin();
});
Does that help? Not sure this is the best solution but it’s one way to do it.
I can’t seem to get my modal to open from within the controller. Here’s what I’ve got:
app.controller('AppCtrl', function ($scope, User, Modal) {
Modal.fromTemplateUrl('templates/modal.html', function (modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('user.notAuthorized', function(e) {
/**
* I can't get the modal to open from here. How would I call it?
* All of the following doesn't work:
* $scope.openModal();
* $scope.modal.show();
* this.openModal();
*/
});
User.isAuthorized();
});
Is there any gap in execution between User.isAuthorized and the user.notAuthorized callback? I’m just curious if $scope.modal is still null when $scope.onModal is called.
I have a problem with modal when opening it from a mobile … it shows the modal structure without the data from the local storage. N.B when opening it from PC browser it works perfectly …
app.js controller
// Open the modal
$scope.showTask = function() {
$scope.taskModal.show();
var offerId= event.target.id;
getOfferDetails(offerId);
};
the function called before.
function getOfferDetails(offerId){
var offers= JSON.parse(window.localStorage.getItem('offers'));
var offer= offers[offerId];
document.getElementById("headerBrandName").innerHTML=offer.brancheId.brandId.name;
document.getElementById("offerBrandName").innerHTML=offer.brancheId.brandId.name;
document.getElementById("brandLogo").src=offer.brancheId.brandId.logoLink;
document.getElementById("offerBrandDescription").innerHTML=offer.brancheId.brandId.description;
document.getElementById("offerImage").src=offer.pictureLink;
document.getElementById("offerNoOfLikes").innerHTML=offer.noOfLikes;
document.getElementById("offerDescription").innerHTML=offer.description;
}
So I got this to work. A bit of a different structure, putting the login and logout as custom $resource actions in the User service. My problem now is hiding the login modal after the successful handshake with the server and storing the auth_token.
What can I call in the SessionCtrl to make it close its own template - the modal “welcome.html” that I called in AppCtrl?
$scope.modal.hide(); does not work - probably because the modal is in a higher order scope.
$scope.modal.hide() or $scope.welcomeModal.hide(); both case this error
Cannot call method 'hide' of undefined
I can see with my AngularJS chrome plugin that welcomeModal is defined at some level of the scope. I just dont’ know how to access it from a different controller.
After 500msec, it will check the AuthService. If not logged in, it will open modal. in the modal, click the button and it will log you in. Then, the modal automatically closes.
Why don’t you fork my example, put your code in and then let me know. I can’t do more without seeing the actual problem as I’m not able to recreate it.
So I decided the paradigm was not right in general so I switched to having my fall-back urlRoute be “/login” and then in the login controller I run AuthService.checkLogin(); immediately and if successful then I just forward the user to the home page.
Well this is a bit late but incase others run into this issue, you can use resolve in your state and redirect from there without touching the controller or displaying a modal. If you have a User Authentication service similar to above you can simply do this:
I am not sure, your code looks correct and should work. I am not using this approach anymore though. https://github.com/fnakstad/angular-client-side-auth checkout this project. It is a cleaner/more robust solution.
