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
Related
Can i traverse the DOM in angular like jquery ? In jquery there are multiple functions like parent(),siblings(), find(), children() etc... like this, Is there any functions in angularjs?
Is there any 'this' keyword in angular DOM traverse like jquery where in jquery this means the current element ?
Any reference links will be more helpful.
Angular comes with a cut down bundled version of jQuery, called jQuery lite:
Docs
In the main, full blown Jquery and Angular can live together, however it is recommended not to use them at the same time - there is generally a much better angular way of achieving what you need to do. For instance testing your logic will be easier.
"This" in your example would refer to something off the current controller and on that controller's scope. It is recommended that you use angular to control and manipulate that element in angular.
I've been using the Angular bootstrap UI modals for a new project
Modal UI
But for what I have read anytime you manipulate the DOM is better using a Directive instead of a controller,
So. when using a modal or calling a modal aren't you somewhat manipulating the DOM?
Should not that Directives be written for a "directive" instead in a controller? If so, can anyone point to an example?
Thank you
Yes.
Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.
See: https://docs.angularjs.org/guide/controller
I also use the UI modal. I believe the actual manipulation is not done through your defined controllers but through directives. You can check out the actual code here: https://github.com/angular-ui/bootstrap/tree/master/src/modal
I was forced to use jQuery code in Angular to hack a plugin that I need to use; should I put this code in the controller or in a <script> tag in the html (to have code that manipulates DOM close to the DOM)?
Its better you write your own custom directive. Please follow here at https://docs.angularjs.org/guide/directive.
You should keep the view logic separate either to HTML or to directives. Angular recommends this to keep your business logic separate from view logic.
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 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>