Angularjs Can I change $scope value of a controller from another controller?

Question

I have an HTML div , like

<div id="loader-container" data-ng-controller="LoaderController" ng-show="shouldShow">
Some html design
</div>

And in my controller

angular.module('core').controller('LoaderController', ['$scope','$location', 'Authentication', '$rootScope',
function($scope,$location, Authentication, $rootScope) {
    $scope.shouldShow = true;
}

]);

And now, I want to hide that html div from another controller, That's why I tried to make $scope.shouldShow variable as false from another controller. So how can I make

$scope.shouldShow = false;

from another controller. Is it possible or any alternative way.?

@Claies is it... or is it a newly generated object for each controller to use. As per the source code. I think you maybe getting confused with $rootScope? — Callum Linington
– Callum Linington, Commented Mar 2, 2015 at 9:42
why you don't maintain this variable inside service/factory? — Pankaj Parkar
– Pankaj Parkar, Commented Mar 2, 2015 at 19:55

Vinay K · Accepted Answer · 2015-03-02 09:40:04Z

10

every controller will create a new Scope.

Hence the changing the scope in one controller will not reflect in the scope of other controller.

If you want to share a property across the controllers create that variable on the $rootScope and use it.

In Controller

$scope.$root.shouldShow = true; //or false

In Markup

<div ng-show="$root.shouldShow"></div>

answered Mar 2, 2015 at 9:40

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

Comments

Faris Zacina · Accepted Answer · 2015-03-02 10:48:12Z

4

It's not a good idea to manipulate a $scope of a controller from a different controller directly. It would make your controllers very tightly coupled.

One commonly accepted way to communicate between controllers is through messages using the publish-subscribe pattern.

If your controllers are in completely separate components and you just need to notify the other controller, you can use the $broadcast/$emit and $on methods of the scope object to broadcast a message from one controller and listening to a specific message in a different controller. When an action happens that should change the shouldShow variable, you can just broadcast a message and make the other controller listen and act on it.

Root Scope API

Another common way to communicate between controllers is by using angular services, acting as a mediator between controllers.

If your controllers are part of the same component/module, and you need to share state/behavior between those, then using an angular service to encapsulate that logic and expose it would be an OK approach (services are singletons in Angular). That would be pretty simple to implement.

However, not knowing more details about your exact requirements, it's hard to design a proper solution.

Thanks to @Callum Linington for discussing the alternatives in the comments.

edited Mar 2, 2015 at 10:48

answered Mar 2, 2015 at 9:38

Faris Zacina

14.3k8 gold badges64 silver badges76 bronze badges

5 Comments

Callum Linington Over a year ago

This can be done more simply with services. Not just pub-sub.

Faris Zacina Over a year ago

Maybe. How exactly? message coupling is the loosest type of coupling, so i think communicating with messages between components has many benefits. Maybe using a service variable is simpler, but again, that means both controllers are coupled to the service. Depends what u consider maintainable and clean.

Callum Linington Over a year ago

if you use .factory( objects are created as a singleton. So you can pass variables around like that. It does depend on the scenario, if you are using a variable in two places then you can abstract that, especially if it has logic associated with it. Rather than having logic in 2 or more places. The problem with pub-sub is it can get very hard to handle in large applications.

Faris Zacina Over a year ago

i know using factories and services like that is pretty common, but i don't think it's clean in all scenarios. It all depends on what you want to do.. do you need to have shared state? or do you want to notify a diff. controller (in a diff. component/module) that something has changed? I have updated my question to put some of this information in it. Thanks for suggesting the alternatives ;)

Callum Linington Over a year ago

Cool, I think you definitely explained it better than I did :P

Collectives™ on Stack Overflow

Angularjs Can I change $scope value of a controller from another controller?

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related