I am facing a different problem.
According to my code I have a common service where I have written all my functions. I have injected service into 2 different controllers.
Here my Problem is I want to call the function in 2nd controller when common service executing under 1st controller. I am passing $scope variable to common service. so when service working under 1st controller $scope variable refers 1st controller only But I want to change the reference of $scope to 2nd controller..
Thanks
Related
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.
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.
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.
I am wondering how I can add a value to the scope from a function outside the controller. I have a series of functions in my controller file, which I would like to keep it separately outside a controller method, so that it can be accessed by different controllers. When the last function gets the value, I want to add it to the scope. Can anybody give me some input into this issue. Thanks
Angular $scope is not supposed to be accessed from outside. Use service/factory/provider to share data between controllers.
Say, define a factory with get/set functions. set the value in some controller and get it from somewhere else. $scope is not supposed to be passed around.
What is the best way to store a "user" object that is accessible across all controllers in an Angular application?
I also have a function that fetches & sets the user.
Option 1: $rootScope
At first I was just setting $rootScope.user = myUser. Then in every control I could use $rootScope. This was fine, until I ended up with a lot of duplicate code since I had to check if it existed at the start of each controller.
// At the start of each controller
if (!$rootScope.user) {
// fetch and set user
}
Option 2: Angular service?
Option 3: Angular factory?
References:
angular.service vs angular.factory
I would use a factory over a service, or $rootScope.
As Ed pointed out below, both a service and a factory are singletons.
$rootScope, as the name implies is the root of all scopes in an angularjs application.
Here is something for reference: http://ilikekillnerds.com/2014/12/angularjs-service-vs-factory/
If you are creating a SPA and not creating a scope without parent then use rootScope it will work like a charm.
In my controller I am using a service based on $http which on success is updating the $scope.
Also, I want to have the access to the service in my directive, the on ng-click in directive make some POST, and then refresh the data from server and update the scope afterwards. So the route for the signal would be: directive -> service -> controller -> $scope. How can I do that without invoking a method on controller, but invoking it from directive?
I know I can bind some methods between directive and controller, but I have like 8 possible methods and I don't want to write 8 times method1:"&" and <myDirective method1="method1()" method2="method2() "etc... That would be a mess.
I don't want you to write much code for me, just some hints, please...
If you do not create isolated scope, or set scope=true inside your directive, the directive runs within the scope of controller.
So your options then are to either
Have the methods on the controller and access them as normal scope methods in the directive.
Inject the service into directive as you do it in controller and call the service and update the controller scope however you want
Still if you want to make directive reusable, it is better to use isolated scopes.
Consider following AngularJS app:
http://jsfiddle.net/pathes/QPL3R/ - application based on tutorial from angularjs.org homepage,
http://jsfiddle.net/pathes/cUaEv/ - its Jasmine tests.
Method addPane() pushes a pane into controller's pane list, paneCount() returns its length. After creating 3 panes, accessing method paneCount() from binding {{paneCount()}} and directly in test: scope.paneCount() returns 0.
It appears that AngularJS creates two instances of controller - one accessible from controller methods, another from scope's. Does anybody know why there's a need of creating two instances? Is there a way to access the same properties from both controller and scope methods?
the problem is the controller definition of yours! you defined the scope twice. once in controller itself and once in the directive definition of the tabs directive. the directive definition overrides the scope of the controller and therefore the count will not be correct.
http://jsfiddle.net/pathes/Z2EWT/ - i've forked your fiddle with the update
// scope: {}, not necessary because defined in controller ctrl
hope this helps :)