I'm using AngularJS with material. I'm in the process of creating a re-usable dialog. I tried to make it as a directive but looks like it's not possible because we've to manually call $mdDialog.show/hide methods. I'm confused whether I've to use a factory or provider in this case?
Related
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 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.
We are looking at implementing an Angular Wizard. Though routes are the best way to do it, we would like the wizard to be presented in such a way that it is usable as a directive.
For eg, someone must be able to use the wizard like (with sufficient options) and all the ui-router logic in between should work.
Is it possible in Angular to wrap the ui-router logic into a directive? Can we declare directives whose dependency is the ui-router (or something like the routeProvider) and start routing inside a directive?
So I have a project that I am working on and it requires that I use jsPlumb for graphical elements connections and I am building my app entirely using AngularJS.
What is the procedure to follow if I want to include another library's code into my controller (to fire up some jsPlumb code, say on ng-click) or any other part of my AngularJS code? Should I do that or why should I not do that?
Take a look at this well-commented jsPlumb/angularJs integration example:
https://github.com/mrquincle/jsplumb-example
I don't see an easy way to establish two way data binding between Angular and jsPlumb.
What I ended up doing on my project is creating a custom Angular service which serves as a bridge between controllers and jsPlumb. Such service contains methods specific to application, such as:
removeElementFromFlow
addElement
getElements
getConnections
isElementConnected
etc.
It allows to keep all jsPlumb plumbing code outside of controllers, keeping them clean.
JSPlumb has put out a tutorial on how to use JSPlumb with Angular:
https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html
I'm trying to integrate angularjs with dojo.
I've decided to wrap creation of dojo objects in an external module, in order to leave my controller clean.
So I have a factory that exposes creation of an AndOrReadStore instance, for example, and then in the controller I use it to instantiate my dojo store.
Here is an example of what I'm trying to do:
http://plnkr.co/edit/EM0kXKWqZzZrlISvsOik
The problem is that the assignment to the store in the controller occurs before the code inside the requirejs block gets executed (and it doesn't make any difference if the async property of dojoConfig is true or false).
How can I use a factory method that is asynchronously? Could premise solve my problem?
Thanks,
Lior