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.
Related
For example we have a web app and sometimes we need to hide or show some custom directives or html parts using ng-if/ng-show/ng-hide. What we do, we click on a link "Example Show Link" and our elements appear or disappear.
So, here is the Problem:
When you go to another page/state/controller of course your directive/html part is still visible.
Is there any cool solution to hide this parts?
Except using rootScope or pushing true/false flag in every controller, 'couse there could be a lot of directives and a lot of controller
You can use routes for this, and ui-router is what I think the best one that handles this. When you use routes, only the current states' templates are shown, when you navigate out of the state, its template (together with all the directives in it) are destroyed. It automatically do it for you.
I am using angular-ui in my project and I wanted to implement a modal window. Most of the components of the library (http://angular-ui.github.io/bootstrap/) are implemented as directives (as expected). However, modal is not - it is implemented as a service. This leads to a strong dependency on the view in the controller (i.e. the controller needs to know that the view uses a modal window, what should not be the case).
My question is: why is modal implemented as a service, not directive? Does it give any benefits?
The $modal directive is quite flexible, and by its API, it supports:
Being triggered on any event you want, since the controller controls when it opens.
Passing data from the controller to the controller in the dialog, using the resolve option
Using any controller or template in the dialog.
Passing data back from the dialog on close to the triggering controller, by its result promise.
While not impossible for this to all be in a directive, I think it could only realistically be achieved by using a lot of options, or a complicated object, which would have to be constructed in the controller anyway.
Another reason for this not being a directive, is that directives are usually for things in a particular place in a page. The modal by its very design is not attached to any element in the page.
I would suggest trying to design an API for a directive that gives the same functionality as $modal, and I suspect it'll reveal that using a service is, on the whole, clearer, and probably more flexible.
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
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.
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>