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>
Related
I've been reading up a more in depth about angularjs directive and controller, what should be in one and the other. The situation is this, I have multiple people with their types -> policemen, medicine, lawyers ... etc. inside the admin panel app, where the admin can manage them. In one section the admin can create, edit, delete them. The current versions controller does almost all the work: UI (bringing up the right form, hiding the other forms...), and logic (deleting, creating, updating methods for each person type). As I understand this is not good, because the controller does multiple things (no single responsibility). And even further the controller should only bind values to scope.
But does that mean, that I should only pull all the people (inside controller) and pass it some master directive which will manage it all? Or should their be more directives inside directives to divide the responsibility?
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
Without code it's hard to give a precise answer, but the general idea when working with angular is this:
Controller: The controller is responsible for keeping the views up to date with all the changes that are happening throughout your app. This means that it should not contain the business logic, this logic should instead be separated into small services. Each handling different parts of the logic for your app.
Service: As stated above, a service should contain your business logic. Meaning that heavy calculations, manipulations etc. should be put into a service. Since services are singletons you can easily inject this service anywhere and re-use the logic within it, something you cannot do if you've put your logic inside a controller.
Directives: Like controllers, directives shouldn't have any business logic in them. Directives are only there to create re-useable functionality as well as giving you a place to handle direct DOM changes. DOM changes should never be done anywhere but from within a directive.
To answer this:
And if so, the controller will have to use the same service as the directive/directives. Controller for pulling people from back-end) and the directive/directives (for creating/updating/deleting) is this DRY?
If you have the data bound to a controller, you should not necessarily need a directive to handle the CRUD operations. Since the data is bound to the controller, you can easily create a template which reacts to the data changes automatically using ng-repeat, ng-if and so on.
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 wanted to know, If we want to manipulate the DOM. Where we should do that.
Is it in a Controller or a directive or somewhere else ?
I have read somewhere that manipulating the DOM in controller should be avoided. Is it correct?
You should use Angular JS Directive for DOM manipulations. DOM Manipulations should not exist in Controllers, Services or anywhere else but in Directives.
One of the nicer features of AngularJS is the framework's ability to separate the roles of the model, the view, and the controller. The separation is clean enough that you shouldn't need to manipulate the DOM directly from code inside the controller. Instead, the controller only manipulates the model, which influences the view through data bindings and directives. The end result is a clean and testable.
Take a look at this
Video - This video tutorial covers manipulating the DOM in AngularJS using directives with a link function.
Best practice is:
Dom manipulations only in directives.
Read here
Could any angularjs guru please tell me when is it better to use nested controller and when to use directive.
Up until now, I've used mostly directive and cannot think of a scenario where I would chose to write a child controller.
My take:
Use:
Controllers (nested) for hierarchical relationships, parts of a page with different purposes are typically child controllers of the page controller.
Directives for stand-alone components that can be reused anywhere/in multiple places. Especially when DOM manipulation is involved, a directive is the right choice. Example: a custom drop down control.
Services for sharing data between controllers that are not nested (no parent/child inheritance).
I have started playing around with AngularJS and I am having a hard time understanding directives and scope.
If I understand correctly, you create directives to create reusable components that contain behavior and logic to modify the DOM?
So do directives get services injected into them?
Or do you use a controller with the directive that has services injected into it?
I guess I am really struggling on the relationship between the directives with controllers and services as well as scope.
Are there any good tutorials out there that explain this in an easy to grasp way?
You can inject a service into a directive or a controller. One thing that helped me was hearing that the only place DOM manipulation should happen is in a directive.
Controllers should be the glue between views and services and basically handle view behavior. They should be thin
Services manage logic independent of the view (and are singletons).
So think more declarative, less iterative. Overall, represent state in models. Then set up bindings so you can change the model and the view automatically changes (From: http://www.youtube.com/watch?v=oJoAnVRIVQo)
You might check out the Angular team's youtube channel: http://www.youtube.com/user/angularjs
And here's some good tutorials: http://egghead.io
Services are meant to persist state across your entire app.
- Most of the time they will exist within your controllers
- they can be injected into your directives
Controllers are meant to perform business/app logic with the values passed in from the view.
Directives are useful for:
- creating reusable components
- adding behavior to the DOM or Forms
http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
Scope is the context within the app that a directive or controller has access to.
- with controllers, the scope is limited to the DOM
element to which it is assigned and its children elements.
- with directives, the scope can be the same scope as the scope of the controller
or be its own scope (isolated from all other scopes), or its own scope
prototypically inherit from its parent scope.
i recommend the videos at http://egghead.io
Trying to understand the concept of AngularJS
Please read THIS response written by Josh David Miller.
I think it will be good start for who knows jQuery but still beginner in AngularJS.
If I understand correctly, you create directives to create reusable components that contain behavior and logic to modify the DOM?
Directives are most difficult piece in AngularJS (at least for me). For sure you can do Service injection on Directives, like:
app.directive('changeMe', ['$compile', 'myService', function($compile, myService){
return {
restrict: 'CA',
link: function (scope, element, attrs) {
scope.value = myService.value;
}
}
}]);
services
The key benefit of services is that it provides the formal mechanism for code reuse. Any shared piece of business logic can be moved to service to improve maintainability of your code by avoiding code duplication. Services like utilities, you can grab them (all services should written in separate JS file) and import to other Projects easily.