Angularjs read $scope in only root state

Question

I'm using ionic and angularjs.

My app.

.state('auth', {
  url: '/auth',
  abstract:true,
  templateUrl: 'templates/auth.html',
  controller: 'authCtrl'
})
.state('auth.reg', {
  url: '/reg',
  templateUrl: 'templates/register.html',
  controller: 'regCtrl'
});

I have this in my auth.html (root view) :

{{authHeader}}

My controller.js

.controller('authCtrl', function($scope, $stateParams) {
  // here can get the scope
  // $scope.authHeader = "register";
})


.controller('regCtrl', function($scope, $stateParams) {
  // here CAN NOT get the scope
  $scope.authHeader = "register";
});

Only in root controller I can get the $scope. I want to add another controller called login, and change there to login. Any idea?

Answer 1

You can use $rootScope for this purpose

.controller('authCtrl', function($scope, $rootScope, $stateParams) {
  // here can get the scope
  // $rootScope.authHeader = "register";
})

And in reg:

.controller('regCtrl', function($scope, $rootScope, $stateParams) {
  // here CAN NOT get the scope
  $rootScope.authHeader = "register";
});

Answer 2

You can use $rootScope for this purpose

.controller('authCtrl', function($scope, $rootScope, $stateParams) {
  // here can get the scope
  // $rootScope.headerData.authHeader = "register";
})

And in reg:

.controller('regCtrl', function($scope, $rootScope, $stateParams) {
  // here CAN NOT get the scope
  $rootScope.headerData = {authHeader : "register"};
});

In your model please use -

{{headerData.authHeader}}

It will always update when controller change.

Answer 3

Try to introduce a Model (a reference object)

$scope.Model = { authHeader : "register" };

That will be inherited by each sub-state and could be changed

usage would be

// {{authHeader}}
{{Model.authHeader}}

See more details here:

How do I share $scope data between states in angularjs ui-router?

or there