When i setup a routeprovider that contains a named group via .when('/search/:searchString', { when the page is loaded for each different :searchString it loads a new instance of the controller assigned.
This causes me a problem when i have a $rootScope.$on('searchUpdated', becuase it reacts to the broadcast message on every instance of the controller.
Is there a way to make it only load one controller and use the same controller for each request, if not is there a way to destroy the controller when the page has left.
For anyone facing a similar issue:
The controller is destroyed, but listeners registered on the $rootScope still exist, since the $rootScope is never destroyed.
The problem seems to be your registering a listener on the $rootScope from every controller instance.
Related
I am working in Angular.js (Angular 1) website - http://keraiz.com/.
I make a main controller for all common thing like login, cart. but when I login or add something to cart it does not show until I reload complete page. If I use $state.reload() then, the controller for page is reload but how I reload my main controller.
You should use $rootScope for user and cart since they should be accessible application wide or a service/factory is to be used.
Also you are using $rootScope and $scope for the same variables like
$rootScope.cartProducts=response.data.response;
$rootScope.totalItem = $scope.cartProducts.length;
totalItem is also in the scope, so updating that would not update the $rootScope value, so overall the whole code should be uniform for the scope and the rootScope to be correctly updated, and that have to be done by you.
Try this link for understanding scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes
NOTE :: Your code is accessible on the internet, so use gulp or grunt etc for maintaining production version code (concat,uglify etc).
I need to load some parameters from Api end point before bootstrap application Angular 1.
I have a factory that contains my functions for request end point and save in memory. I need to use this factory to execute my roles. The problem is that I can not inject my facotry before bootstrap application. I can not create other roles that do the same thinks, i have to use this factory for my application working.
Anybody have a good suggestion about this case? Who already needed this case?
Thanks everyone.
If you are using the ngRoute router, you can use resolve functions to delay instantiation of the view and its controller until data arrives from an asynchronous API.
resolve - {Object.<string, Function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property (see below). This can be particularly useful, when working with components as route templates.
— AngularJS ngRoute $routeProvider API Reference
I think you should be ok using the angular-ui-router. You can use resolve on your routes. This will force Angular to resolve the data before moving on to rendering the controller.
You can setup resolve before you enter your default state in ui-router.
Reference:
https://github.com/angular-ui/ui-router/wiki#resolve
I have an Angular js factory. In which I am storing the user information after successful login. Now I have multiple controllers in all of them I need this user information so I need to inject this factory to each and every controller. Is there any way to access this factory data throughout the project without injecting in each and every controller?
Can we directly inject it into the module?
Some suggestions :
storing the user information in factory is not a good approach because if user reload the page it will reset the factory data and user will not exist anymore.
As sajeetharan suggested, you can use HTML5 localStorage or sessionStorage to store the user information. So, that without injecting you can easily access stored storage value everywhere you want.
Yes, if you need the user information so you need to inject the factory to each and every controller because on switching from one controller to another controller you have to fetch the data from the factory.If you inject the factory only in the main module it will not load the factory when you move from success login to some other page.
User information can be stored in local storage or cookie so that i can be accessed anywhere.
You can also consider using $rootScope, in that case also you need to inject in all the modules which you require.
a factory is part of a module.
Injecting it into the controllers needed is the way of using the saved values throughout the module.
Is there a way to list all active controller names into console? Need this for external E2E testing, to check if controller has loaded without waiting for DOM to fully render.
As mention in the comment you can log a message inside your controller to monitor when it is used.
angular.module("myApp").controller('MyController', function(){
Console.log("MyController loaded !")
})
Hello i Have one HTML file and i have assign the controller to the HTML. I am including another view in the same file. Included file also have controller associated. Now I want to call method of included view from outside of the controller. Here I have multiple views that are going to be load.
<div ng-view>
</div>
You cann't directly call controller method of another controller in your page.
Your controllers can use events to communicate. using $rootScope.$emit + $rootScope.$on is recommended solution.
you can refer to this post for further info.
What's the correct way to communicate between controllers in AngularJS?
You can only have one ng-view per a page. what you can do is to use ng-include to load another view and use $scope.$broadCast and $scope.$emit to publish events.
Have look here Working with $scope.$emit and $scope.$on
you can try pass the method as an object using the service or factory. If possible you can import the factory and work on that function you passes as veriable. But if it is a utility function, then it will work fine. If it uses variables of the controller then I am not sure it will work.
Otherwise use use $scope.$broadCast and $scope.$emit like other answers say.