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
Related
i want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.
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.
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.
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
I am using Angular UI Bootstrap Datepicker. I want to add behavior to this component. According to this guide, Extending Directives, I proposed some changes to this component. Changes can be view there: GitHub PR #257.
So now, I am trying to require it inside my extension but Angular keep saying he can't find datepicker controller.
I read this thread on SO AngularJS directive controllers requiring parent directive controllers? in which the answer basically shows the same and it seems working, Fiddle.
I looked at the Angular version which is 1.0.3 in the Fiddle and I am using Angular 1.1.5.
Did this change in latest Angular version or am I doing it wrong?
According to the comments, indeed, it still works with AngularJS 1.1.5. And ended finding what was messing up. As I wanted to extend the core functionalities, I wanted to edit the original template so I used the templateUrl and provided a path to a custom template, which worked when stacking the directives but the same when requiring directives mess the things up.
Do you know how I can override original template in this context?