Getting access to parent scope variables using ui router

Question

I am currently using ui router as below: -

$stateProvider
    .state('login', {
    url: '/login'
    , resolve: loadSequence(
        'base')
    , templateUrl: 'app/shared/main/login-main.html'
    , controller: 'mainController'
    , abstract: true
})
    .state('login.signin', {
    url: '/signin'
    , resolve: loadSequence(
        'login-items'
        , 'spin'
        , 'ladda'
        , 'angular-ladda'
        , '_loginController'
        )
    , templateUrl: "app/components/login/login_login.html"
    , controller: 'loginController'
});

Now in loginController I want to be able to access a function in the mainController.

Is that possible with my current implementation:-

angular.module('app').controller('mainController', function($scope, $state) {
  $scope.showWarning= function(){
      //show warning
  }
});

angular.module('app').controller('loginController', function($scope, $state) {
  // I want to access $scope.showWarninghere;
});

Yes, you should just be able to refer to $scope.getData() from the loginController, but really something called getData() should be in a service that you can just inject where needed. — Duncan
– Duncan, Commented Mar 16, 2016 at 8:57
I am currently getting TypeError: $scope.getData is not a function, concerning the service you are right, but the getData is just an example, sorry for the misnomer. — user2327579
– user2327579, Commented Mar 16, 2016 at 9:00
I think it depends on how your page is constructed. If the scopes are nested you could access it, but nesting the states doesn't force that. — Duncan
– Duncan, Commented Mar 16, 2016 at 9:08
Ok it works, but is this a good way of sharing scope like this, i mean performance wise — user2327579
– user2327579, Commented Mar 16, 2016 at 9:09

Duncan · Accepted Answer · 2016-03-16 09:05:51Z

1

Extract the getData() method out into a service and then you can inject it into both controllers:

angular.module('app').factory('dataService', function () {
    return {
        getData: function() { ... }
    }
});

angular.module('app').controller('mainController', function($scope, $state, dataService) {
  // You probably don't need to put this into your scope, but if you do:
  $scope.getData = dataService.getData.bind(dataService);
});

angular.module('app').controller('loginController', function($scope, $state, dataService) {
  dataService.getData(); 
});

It is useful to remember that scopes and controllers are created and destroyed as you navigate between states, so anything that actually wants to exist in more than one state really does want to be stored in a service.

answered Mar 16, 2016 at 9:05

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

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

Comments

Sam Bauwens · Accepted Answer · 2016-03-16 09:40:56Z

1

As said by Duncan and Sanjay, it might indeed be a better idea to use a service to get the data, but I thought I'd answer the original question so you know :

As stated in the docs, for prototypal inheritance to be active the views must be nested, not only the states.

So in order for loginController to have access to the scope of mainController, the login-main.html template must use the uiView directive (e.g <div ui-view></div>) which will be the placeholder for the login_login.html template of the login.signin state.

answered Mar 16, 2016 at 9:40

Sam Bauwens

1,39711 silver badges19 bronze badges

Comments

Sanjay Nishad · Accepted Answer · 2016-03-16 09:06:58Z

0

you can use angular service for this.

I found a Plunker code to resolve your problem

answered Mar 16, 2016 at 9:06

Sanjay Nishad

1,62515 silver badges29 bronze badges

Collectives™ on Stack Overflow

Getting access to parent scope variables using ui router

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related