How to use variables from a controller in another controller in AngularJS

Question

I'm new in AngularJS and I want to use the username and password variables that I get in this controller:

.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state, Api) {
    $scope.data = {};

    $scope.login = function() {

        LoginService.loginUser($scope.data.username, $scope.data.password)
        .success(function(data) {
            $scope.data = {}
            $state.go('tabs.extranet');
        })
        .error(function(data) {
            var alertPopup = $ionicPopup.alert({
                title: 'Acceso denegado',
                template: 'Por favor, compruebe su usuario y/o contraseña'
            });
            $state.go('tabs.extranet');
        });
    };
})

Inside this controller

.controller('SaesoTabCtrl', function($scope, $sce, Saeso, Api){
    //some code....
}

Thanks

Any answer actually answered your question?

jeerbl
– jeerbl

2016-08-17 08:25:31 +00:00
Commented Aug 17, 2016 at 8:25 — jeerbl
– jeerbl, Commented Aug 17, 2016 at 8:25

halfer · Accepted Answer · 2016-04-11 18:45:57Z

1

You can add vars to $rootScope and access them in any controller using $rootScope.varname.

This is not good practice because its essentially similar to introducing global Angular variables.

A better approach, which may or may not work in your situation, is to define two controllers as follows:

<body ng-controller="MainController">

  <!-- only MainController is accessible here -->
  <div ng-controller="InnerController">

    <!-- both MainController and InnerController are accessible here -->
    <!-- main controllers $scope variables should also be accessible in InnerController -->

  </div>

</body>

I would be interested if you try the latter approach to know if you got it working. This demonstrates scopical inheritance. Maybe you can make a plunker for this?

edited Apr 11, 2016 at 18:45

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 14, 2016 at 18:24

danday74

58k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jusopi · Accepted Answer · 2016-01-14 17:18:55Z

0

Use a model-type value or your LoginService and inject it into both controllers. Save the data onto the service rather than the controller.

model

ngModule.value( 'session', { username:'', sessionId: '' });

session service

ngModule.service( 'sessionService', function(){
    var api = { username: '', sessionId: '' }
    api.doLogin = function(){}

    return api;
})

injection into controllers

ngModule.controller( 'LoginCtrl', function( $scope, session<Service> ){

     $scope.doLogin = function( un, pw ){
          sessionService.doLogin( un, pw )
          .then( function( rsp ){
               sessionService.username = un
               sessionService.sessionId = rsp
          })
     }
})
ngModule.controller( 'SaesoTabCtrl', function( session<Service> ){ ... })

note - I do not recommend that you store your password data in either of these solutions, this was simply to further illustrate the point. Hopefully your login service provides a session id that expires after a certain time.

edited Jan 14, 2016 at 17:18

answered Jan 14, 2016 at 17:10

jusopi

6,8133 gold badges37 silver badges44 bronze badges

4 Comments

Juan Over a year ago

Thanks for your reply! I will try it

danday74 Over a year ago

This is a possible solution and an alternative to the one i gave below

jusopi Over a year ago

@danday74 - My problem with using the scope hierarchy (in your answer) for this type of functionality is that: It's implicitly available everywhere underneath the top-most scope, to any other scopes that inherit from it (scope inheritance, except isolate scopes); it starts treating the $scope object more like a service, blurring the SoP; it is not the recommended angular-ish way to handle this use case; with ng1.x & ng2 moving away from the $scope altogether, you've added an additional place where you must refactor your code if you upgrade.

danday74 Over a year ago

jusopi, i agree with your comment and would never use the first approach i suggested but nevertheless it is A solution. The second approach is better since it at least provides an element of restricted visibility. However, in all fairness I would prefer your approach over those documented by myself :) I personally never use $scope, preferring the controller as syntax - thanks

jeerbl · Accepted Answer · 2016-04-11 18:55:50Z

0

Try to put your data inside the $rootScope. It is accessible from anywhere in the application.

edited Apr 11, 2016 at 18:55

answered Apr 11, 2016 at 18:49

jeerbl

7,9675 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to use variables from a controller in another controller in AngularJS

3 Answers 3

Comments

model

session service

injection into controllers

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

model

session service

injection into controllers

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related