I have a sideMenu in my ionic project. I have a menu login. In my menu controller I have:
if (logged) {
$scope.loginText = 'Login';
}else{
$scope.loginText = 'Logout';
}
In my menu I simply add a {{loginText}} in the correct menu.
Then I do the login in another controller. When the user log in, I have to refresh the page to change the text. How can I change the text without need to refresh?
This is because the variable logged change is not detected on login. Since it is in different controller the change has to be manually send. this can be achieved by using $rootScope to send messages through different controller which are under the same parent controller. hence a message or an event has to be send. the below code will help.
in login controller after logged in.
$rootScope.$broadcast('isLOggedIn', true);
in menu controller
$scope.$on('isLOggedIn', function (event, data) {
if (data) {
$scope.loginText = 'Login';
}else{
$scope.loginText = 'Logout';
}
});
remember to inject $rootScope in login controller.
Related
Using Angularjs. How do you handle the situation where a person reloads a page and the controller tries to query Firebase using the current user's uid before the Firebase auth event is triggered and has a chance to set the current user?
Details:
The Firebase query require's the user's uid and everything works when navigated to the route via $state.go('/list')
But when a person reloads the page the controller checks for the user which doesn't exist until this event handler fires:
auth.onAuthStateChanged(function(user) {
if (user) {
//Set user
UserSrvc.currentUser = user;
} else {
$state.go('/login');
}
});
app.controller('ListCtrl', function($scope, UserSrvc, Posts ) {
if (!UserSrvc.currentUser){
UserSrvc.getUser();
};
$scope.posts = Posts.list(); <--THIS GENERATES ERROR, SINCE NO USER YET
})
If Firebase still had the synchronous auth call this wouldn't be an issue since I could do the check and call at the beginning of the controller.
So:
What is the best way to handle this situation.
If user is not logged in, how does UserSrvc.getUser() navigate to $state.go('/login') without having Posts.list() execute?
The common way to implement this is by moving the loading of the posts into onAuthStateChanged():
app.controller('ListCtrl', function($scope, UserSrvc, Posts ) {
auth.onAuthStateChanged(function(user) { $timeout(function() {
if (user) {
UserSrvc.currentUser = user;
if (!UserSrvc.currentUser){
UserSrvc.getUser();
};
$scope.posts = Posts.list();
} else {
$state.go('/login');
}
})});
});
You'll note I added a $timeout() in there, since otherwise Angular won't be aware of the update we've made to $scope.
Note that we have a dedicated library binding Firebase to AngularJS called AngularFire, which does a lot of this automatically for you.
In my html page, clicking a row sends you to another html page. ng-click calls the funtion showScripts and fills the variable $scope.Scripts using ajax call, which I am using in this new html page.
$scope.showScripts=function(event,item){
$http.get('/Scripts/'+item).success(
function(data) {
$scope.Scripts = data.responseData;
});
if (event.ctrlKey) {
window.open("/scripts.html","_blank"); // in new tab
} else {
window.open('/Scripts.html',"mywindow"); // in new tab
}
}
The File Scripts.html is using the same controller. So when the html loads, the angularjs file loads again and the values in $scope.Scripts go back to undefined. Can I prevent the controller from refreshing the values?
You have to use this logic:
var yourUrl = '/scripts.html';
$window.location.href = yourUrl;
OR:
$window.location.href = '/scripts.html';
$window.location.reload();
when you are using same controller for different views, you can create Service or factory method for storing and retrieving data. Another way is that you can store the data in $rootScope as well.
I want to redirect to different page after successful submission of form in angularjs using firebase.
I am using push() for pushing data in database of firebase.Here is my controller implementation-
.controller('AddPostCtrl',['$scope','$location',function($scope,$location){
$scope.AddPost=function(event){
var firebaseObj=new Firebase("https://boiling-inferno-5476.firebaseio.com/Article");
event.preventDefault();
var title=$scope.article.title;
var post=$scope.article.post;
firebaseObj.push({
title:title,
post:post
},function(error){
if(error)
{
console.log(error);
}
else
{
$location.path('/welcome');
}
})
}
}])
On clicking submit button of form page should be redirected to 'welcome' page,but i have to click twice to do that.is there any error in my implementation.
Try this:
$scope.$apply(function() {
$location.path('/welcome');
});
The $location service uses the $digest phase to start the route change. That's why you have to use the $apply function when the $location service is used outside of the scope life cycle. And that's why your second click applied the route changed upon the first click.
I have an application which uses AngularJS. I have a contact us page where in i populate the the name, email field based on the logged in user. Now lets say user updates his/her name or email from profile page and that should reflect in the contact us page. The contact us page is loaded as a modal dialog, and the updated value is not reflected until i reload the page.
The $modal.open{...}) returns an object which result property is a promise:
$modal.open({...}).result
is a promise. You can attach a success handler to update the data in the controller. When you close the modal whether using $modalInstance.close or $close in your HTML, do not forget to call it with the newUserName as argument.
function yourCtrl ($scope) {
$scope.userName = // whatever
$modal.open({...}).result.then(function (newUserName) {
// update the userName:
$scope.userName = newUserName;
});
}
Lets say in Profile page...you have a modal....umm, say $scope.name. If you're triggering the Contact page modal dialog from inside the Profile page - meaning the Contact page is a child of the Profile page...in your html, you could say:
<xx>{{$parent.name}}</xx>
Makes sense?
I have a navbar ul in a view that shouldn't be shown if the user isn't logged in. For this I'm using ng-show="session.exists()". When the logout button (also in the nav bar view) is clicked it calls:
$scope.logout = function () {
var success = function () {
$state.transitionTo('login');
};
console.log($scope.session.exists());
Auth.logout().then(success);
console.log($scope.session.exists());
};
from my log statements i can see that the see that the session is being destroyed ok but the el elements I want hidden are still visible. The elements are hidden if I refresh the page. Am I missing a trick here? I'm new to angular and have inherited a project so any suggestions greatly appreciated!
C
Probably your function are not being fired on ngShow when you destroy the user session.
I suggest you to use a variable to control that, and set it on on your logout function.
In your controller:
$scope.loggedIn = true;
$scope.logout = function() {
$scope.loggedIn = false;
}
And in your view:
<div data-ng-show="loggedIn">Show Me!</div>
I think you are trying to update the scope variable responsible for your showing your navbar url from an asynchronous function call probably in side the success of a http call.
So try adding $scope.$digest(); just after updating the scope variable