AngularJS: access scope in other function in same controller

Question

I am using angular in a project and after the user logs in his data gets saved into the database and he can pass on to the main application. BUT I need to use his name in order to show his orders, so I can extract his name when he logs in but when I want to use this name in another function I get: 'undefined'...?

AngularJS

$scope.redirectafterLogin = function($username)
{
    $rootScope.username = $username;
    window.location = "index1.html";
}
//SHOW ORDER FOR LOGGED IN CUSTOMER  
$scope.orderCustomer = function (){
    $http.get('/api/getorderS/'+$rootScope.username).then(function (results) 

    {  
    ... 
    }

So how can I access the $rootScope.username variable in my orderCustomer function?

It seems that there is full refresh between login page and main app. Because of that you probably lose all variable values. If the refresh must happen, then you can maybe pass username as parameter to the "main app". — Nema
– Nema, Commented Jun 1, 2015 at 14:27
Yes there is a full refresh... How can I pass the username as a parameter? — smanhoff
– smanhoff, Commented Jun 1, 2015 at 14:29
window.location = "index1.html?username=" + $username; Then in "main app" get this parameter from URL. There is a lot of examples how to do this. — Nema
– Nema, Commented Jun 1, 2015 at 14:31
or it could be that $username is undefined check to see if you have value there — Sankara
– Sankara, Commented Jun 1, 2015 at 14:31

Guinn · Accepted Answer · 2015-06-01 14:59:04Z

You could save the username in a service. A $scope or $rootScope is whiped when doing a full refresh, because when you 'instantiate' the controller a scope is created, when you refresh the page the controller gets re-instantiated and thus the scope is whiped aswell. So to create your service do something like:

app.factory('userService', [function() {
    return {
        userName: null
    }
}])

and then in your controller:

app.controller('loginCtrl', ['userService', function(userService) {
    $scope.redirectafterLogin = function($username)
    {
        userService.userName = $username;
        window.location = "index1.html";
    }

    $scope.orderCustomer = function (){
       $http.get('/api/getorderS/'+ userService.userName).then(function (results) 

       {  
            ... 
       }

You could make a getter and setter to beautify above code aswell, just add:

setUserName: function(user) {
        this.userName = user;
     },
getUserName: function() {
        return this.userName;
}

to your service, and then replace the + userService.username with + userService.getUserName()

edit On a side note: make sure you are using ng-controller="loginCtrl" in 'index1.html'!

Collectives™ on Stack Overflow

AngularJS: access scope in other function in same controller

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related