$scope variable not updating between controllers - angularjs

Question

I have a header view as

<div ng-controller="navCtrl">
<ul class="nav navbar-nav" ng-show="isAuthenticated">
      <li> <a ui-sref="logout"> Logout </a> </li>
</ul>
</div>

The navigation controller

(function(){
    var navigationController = function($scope, authToken){
        $scope.isAuthenticated = authToken.isAuthenticated(); //return bool
    };
    navigationController.$inject = ['$scope','authToken'];
    angular.module('simpleApp')
        .controller('navCtrl', navigationController);
}());

I have another logout controller

(function(){
    var logoutController = function($scope ,authToken, $state){
        $scope.isAuthenticated = false;
        $state.go('main');
    };
    logoutController.$inject = ['$scope', 'authToken', '$state'];
    angular.module('simpleApp')
        .controller('logoutCtrl', logoutController);
}());

When I click on the Logout link i set $scope.isAuthenticated = false; , expecting the navigation menu to hide but it dosent.

Something seems to be done in the wrong way :(

Link to Plunk

your page has 3 different angular modules, each with their own $scope. how would you expect changing a property on one of them to affect the other two? — Claies
– Claies, Commented Dec 2, 2015 at 15:35
a new $scope is created any time that an element has an ng-controller attached. unless they are nested (and they are not, in your case), each element group (i.e. from <div> to </div>) are separate. in other words, you cannot change a $scope property in one controller and see the effect of that change in another. You need to use Services or events to share data between controllers. — Claies
– Claies, Commented Dec 2, 2015 at 16:33

fdreger · Accepted Answer · 2015-12-02 15:53:49Z

1

Scopes are glued to DOM elements, and possibly to each other. They are not singletons and they are not connected to modules (they serve as the model layer, not as the service layer).

Since scopes can form a hierarchy, based on the DOM tree, you could keep the common data in the topmost scope; this way it would be reachable from any descendant scope.

answered Dec 2, 2015 at 15:53

fdreger

12.6k1 gold badge38 silver badges46 bronze badges

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

3 Comments

epynic Over a year ago

sorry, I am still confused in logout controller $scope.isAuthenticated is set to false; that should update the ng-show="isAuthenticated" right , as Scopes are glue to each other?

fdreger Over a year ago

Scopes are glued to each other when they are nested. Then the inner scopes can see attributes from their outer scopes. You are trying to see an attribute from an inner scope (login) in the outer scope (navigation), which will not work. As stated in my answer, keep the data in your topmost scope. Or in this case, the real solution is to add a login service object.

epynic Over a year ago

can you have a look at the updated plunker plnkr.co/edit/uz9Dyz ,have created a factory and i am stuck now

Guenter Guckelsberger · Accepted Answer · 2015-12-02 20:55:46Z

1

Change $scope to $rootScope in both controllers than it will work. $rootScope is the topmost scope.

Just for the record: this is not my preferred solution, I would go with a service.

answered Dec 2, 2015 at 20:55

Guenter Guckelsberger

9408 silver badges6 bronze badges

1 Comment

epynic Over a year ago

plnkr.co/edit/uz9Dyz , can you check that updated plunk pls . created a factory ,how can i make the controllers to talk to each other ?

Collectives™ on Stack Overflow

$scope variable not updating between controllers - angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related