I am new to learning Angularjs and kinda confused. I want to ask that if the same controller is binded at different pages does those pages share the same scope variable or they have their own isolated scope? Remember both of the pages are using the same controller.
8
-
Yes, as the $scope is injected to controller function and that would be available in the function context wherever you use it.Krishna– Krishna2015-08-21 11:11:12 +00:00Commented Aug 21, 2015 at 11:11
-
1@Krishna - Are you sure? Firstly, how can two different pages use the same controller? If anything, they use two different instances of given controller class.BroiSatse– BroiSatse2015-08-21 11:16:45 +00:00Commented Aug 21, 2015 at 11:16
-
@BroiSatse - as long as they are rendered under the same URI or page at the client side two pages can share the same controller.Krishna– Krishna2015-08-21 11:20:35 +00:00Commented Aug 21, 2015 at 11:20
-
It will be a different $scope. Even if it's the same controller in different page. Each page will have his own controller. I mean your controller will be initialize each time.Pierre-Alexandre Moller– Pierre-Alexandre Moller2015-08-21 11:20:59 +00:00Commented Aug 21, 2015 at 11:20
-
@Krishna - Could you show how to do this? I mean how to attach a single controller to two DOM elements?BroiSatse– BroiSatse2015-08-21 11:22:35 +00:00Commented Aug 21, 2015 at 11:22
|
Show 3 more comments
2 Answers
From the documentation:
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.
So 1) it is not the same controller, those are two instances of the same constructor functions (a.k.a class) and 2) new scope is created as a child of a scope controller is attached to.
Another point from documentation:
Scopes are arranged in hierarchical structure which mimic the DOM structure of the application.
So two separate DOM elements cannot have same scope - it would heavily affect Angular structure. Each controller can only get an access to the scope of element it is attached to.
If you suffering because of one scope being updated when another one is changed, please post your code as you can have "surprise closure" in your controller definition.
1 Comment
Sana
so the scopes are different even though the controller of two pages are same ?
I want to ask that if the same controller is binded at different pages does those pages share the same scope variable or they have their own isolated scope? Remember both of the pages are using the same controller.
Yes, I echo others thoughts here. if you are using same controller for any number of pages the scope will remains same for each page. Unless one does not change the scope, the value remains as it was during the initialization.
eg. Your controller is as below
myApp.controller('FirstCtrl', function( $scope){
$scope.myVar = 'this is my scope';
});
and if you are using same controller for two pages then for page one and page two will have same value of myVar. Hence below html in one page one
<div ng-model="myVar"></div>
and below html in page two
<span ng-model="myVar"></span>
will display as
<div ng-model="myVar">this is my scope</div>
and
<span ng-model="myVar">this is my scope</span>
respectively.
Given this, I would like to add that it is also possible of sharing $scope between different controllers using $emit, $broadcast and $on. Read more about this at http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html
Hope this helps.
3 Comments
Eesa
Actually I was using the same controller at different pages and each time I switch between the pages the $scope variable was reinitialized so I thought may be each page has different isolated $scope but it wasn't the case. I appreciate your help.
user3758745
This chosen answer is incorrect. Both pages are displaying "this is my scope" because both variables are initialize to 'this is my scope' upon initialization of the Controller. Try changing the $scope.myVar and see if both pages update.
Anand G
You couldn't get my answer!
Unless one does not change the scope, the value remains as it was during the initialization. In my example, the same instance of scope will be shared since bothe the page will come under the same Isolated scope. If I explicitly overwrite the scope, it will change as per the given scope.