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.
Related
What is the proper way to access a function side controller A from inside controller B?
The best method I've been able to find is to push the functions to a shared service, so I've started to move all of my functions and logic inside this service, which feels like the wrong way to do things.
My scenario is that I have a view utilizing two different controllers. Each one has its own set of tabs for navigation. I need to be able to navigate between views and to specific tabs inside.
Is a service really the best way to do this? Or have I missed something?
The best way to communicate between two controllers is by using the service. You have common method defined inside the service and then inject that service wherever you need that function to use.
Use $broadcast service to trigger the event and all.
Following is the plnkr which shows how to communicate between the controllers.
Plnkr :http://plnkr.co/edit/d98mOuVvFMr1YtgRr9hq?p=preview
I am doing a project. Here I have a right sidebar which is to be shown in some pages and should not be shown in some other pages of the site. How this functionality can be achieved. Is it done by setting $rootscope variable in some page controllers and not in some other controllers?
From your page controller pass message to sidebar controller or main controller saying hide or show sidebar.
You can use emit and broad cast to pass massages between controller.
Here is a good sample
Working with $scope.$emit and $scope.$on
I would not use $scope.$emit and $scope.$on, I think a good way to deal with this is to have a parent controller, lets say a MainController that shares it scope with both child controllers. Then from the child controllers you can call the parent one.
$emit and $on are quit performance heavy, especially when your application grows. Try to give it a minutes thought to figure out how you want to structure your code.
Is there a way to refresh a controller from another controller?
For example, Controller1 runs then Controller2 runs. At the end of Controller2 there is a
"command" to re-run Controller1. Is this possible?
In my post I had made earlier it seems like my questions was unclear what I was trying to do. Here is a link to it.
Updating a controller from another controller Angular
if you are using ngRoute there is a method to re-run the all the controller without having to reload the page.
app.controller('MyCtrl', function($route){
$route.reload()
})
If you want to refresh data, please use services and refresh data in the services. Sequential things can be done of ajax by using promises. Please let me know if you need any help in designing the solution
I think you need to look into using directives. By using directives you can encapsulate and share scope objects.
Please read the documentation on directives and "shared scope".
http://docs.angularjs.org/guide/directive
I would to dynamically load controller in my partial file so my code is better organized. Through my research, I found that if I want to load controller from partial using the script tag, I need to include JQuery.
However, these approach seem to only work if my controller is declared in the global scope, i.e.
function MainCtrl($scope) {}
If I switch to using module in my controller.js
angular.module ("myApp").controller ("MainCtrl", function ($scope) {});
this no longer work with the error message
"Argument 'MainCtrl' is not a function, got undefined"
Below is a plunker to demonstrate this.
http://plnkr.co/wNv3UD
How could I make this work?
Note
I did not include controller.js in index.html intentionally. I want to load controller from the partial.html, since it would only be used there.
Edit
I was able to achieve what I wanted to to after reading this question: AngularJS Dynamic loading a controller
This seem to be a straightforward approach to support lazy loading. Hopefully the $controllerProvider.register method could be exposed through angular.module.controller in future versions to support lazy loading.
You may want to take a look at [RequireJS][1]
it provides a good and easy way for you to load your .js files on the run.
for the dynamic controller loading part: you should write a provider (a service) which exposes some methods to register your controllers wile the angular app is running (take a look at $controllerProvider in angular docs)
i suggest you take a look at this post as it mentions how to fully customize your application regarding the script loading and controller registeration and stuff like that.
You can achieve this using custom directive and in directive you can load script using jquery getscript or jQuery ajax call, directive will fire when you load the partial
I am trying to create a web application and I need little widgets that should be available from all controllers (i.e. a loading overlay and a sliding drawer). I have created directives with methods to display such behaviour, but you can't inject directives in controllers, that's not how they work.
I know I have to create a service that deals with this, and inject it in both controller and directive, but still can't figure out how to make the communication. The elements that have the directive are unique.
Another option I've considered is to create event listeners in the $rootScope or somewhere else and call $emit from all controllers that might need it, but I feel like the other way is more angular-y
Your "widgets" need ng-controller directives. I think this is what you're looking for:
<div ng-mywidgetdirective ng-controller="mywidgetcontroller"></div>