I'm trying to wrap the Bootstrap Modal dialog in an Angular 2 component/directive/...
Not having much luck though. I've had a look at https://github.com/shlomiassaf/angular2-modal but many of the APIs used there aren't available anymore in the latest release - 0.46.
I would like a service that opens/closes the dialog. In order to do so, I would need something to manipulate the DOM. Injecting a Renderer, ElementRef, etc. don't seem to suffice.
On additional caveat is that a Modal needs to insert a non-clickable backdrop so a simple component won't do since it can only influence the DOM locally.
Related
I've been working with Angular and Angular Material for a while. One thing that bewilders me is how much boiler plate code you need write to just create a simple dialog.
The dialog needs to be defined in a component, and adds to the entry declaration of the module if not used in the same file. The dialog itself needs to inject a MatDialogRef, so you can pass data out when it closes. You need to inject a MatDialog into the main component that opens the dialog. You need to call its open function to open the dialog and pass value explicitly to the component. You probably need to read a tutorial to start using it.
It works well but compared with other implementations, it just seems too complicated. For example, in PrimeNG, a component library for Angular, you can define a dialog like:
<p-dialog header="Title" [(visible)]="display">
Content
</p-dialog>
You have a single variable that controls the visibility of the dialog. Anyone knows a little Angular can start using it with no learning curve.
So my question is: why Angular material wants to implement this way? What kind of advantage does it have? Is it efficiency or it gives you more flexibility in implementing complex functionalities?
I don't really have code to show. I thought just maybe it'd be as simple as copying the module directive from angular strap over to ui bootstrap, but that's very obviously been proven incorrect. Has anybody else tried doing this with any success? To reiterate, I want to be able to use the aside module of Angular Strap with AngularUI Bootstrap.
Both products are constructed so that you can pick and choose which parts to use. If you look at Github you'll find the separate source for Aside:
https://github.com/mgcrea/angular-strap/blob/master/src/aside/aside.js
Download that and include it in your project.
Just like #Don said in his comment, aside requires modal directive from ngStrap that will conflict in ui-bootstrap's modal directive. But theres still a solution.
The solution is quite simple and I only had to add one dependency to get the basic CSS from the AngularStrap CSS project although this is not really needed but saves some time. The dependency is bootstrap-additions and you only need the aside.less file or the CSS if you prefer.
The code is pretty simple because the angular-ui modal component allows to use custom templates for the modal content but also for the modal container so you are not restricted to Bootstrap modal, you can create your own.
$modal.open({
templateUrl: ‘your.modal.template.html’,
windowTemplateUrl: ‘aside.template.html’
});
Heres is the full tutorial/solution where I got the answer. Credits to him.
I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.
Problem: How do I manage a bunch of modals in an Angular JS controller?
I was putting them at the bottom of my view and using http://angular-ui.github.io/bootstrap/#/modal
but I was ending up with large html templates (that work) but feel inefficient.
What I've tried:
$dialog from UI-Bootstrap (pain in the butt)
Modals stored in templates included via ng-include using UI-Bootstrap's modal
modals put at the bottom of my view within the controller << currently on and is working
This feels like I'm missing something. Any pointers?
EDIT:
I did A LOT of searching and found a script and then upgraded it a bit:
Your modals are external templates
Their also in the scope where you clicked the button
3 different kinds (Confirm, Message, Load a template)
https://github.com/clouddueling/angularjs-modals
Update
I've since made a repo covering this issue: http://clouddueling.github.io/angular-common/
As rGil stated, use a directive, your own and not UI-Bootstrap if it seems too convoluted. All your modals will be similar, more or less. You just have to have a template and 2-3 scope variables to populate the modal. You can then pass parameters to open and close the modal as well and offer further functionality. The more you include the bigger the directive will be.
A second option would be to create separate HTML partials with those modals, and then just use ngInclude to place them in your views. This would be a huge time saver if your modals are different, but are reused frequently on multiple pages. Down sides to this is that you still need to toggle it open and closed. The Angular way would be to write a directive to handle just the toggling if that is all you need. The easy way is to write a little jQuery and open the modal on click or whatever.
Honestly, what it all comes down to is your comfort level. Will jQuery destroy your code? No, but it is not the "Angular Way". With jQuery, I can write a modal toggle in 3-4 lines of code. Doing it the Angular Way is a directive and a dozen+ lines of code. But the Angular way has the benefit of writing a tag in the future and no more code is needed. If I have just one modal, I may do it in jQuery. If I have multiple modals, as in your case, I may invest the time to learn directives and come up with one that works how I want it to work.
Im looking for some good resources for MooTools. jQuery has a nice plugins site. Does anyone know of a similar site for mootools plugins?
Specifically Im looking for:
Grid Component
Modal Dialog Component
Treeview
What would you recommend?
clearly not looked very far (at least for the repository) - any google search for 'official mootols plugins' would have done the trick. Even a look at the mootools homepage reveals The Mootools Forge:
http://mootools.net/forge/
I cannot comment on the availability of the individual items yet I know treeview is available, modal dialogues also - that leaves the grid component.
update
If i had to pick, i'd go with http://www.jsfiddle.net/sixtyseconds/zNMQy/ for modal view (by 60 seconds, aka chris pitt) - consise, to the point and customisable BY YOU. events etc as you'd expect.
As for tree view, the only one I used a while back is called... mooTree, http://sites.google.com/a/mindplay.dk/mootree/Home - very flexible (adopt structure from html, xml or json source if memory serves etc).
MooTools.net/Forge has lots of widgets and UI:
For Grid Component, OmniGrid
For Modal Dialog, MUX.Dialog
For Treeview, Tree or Mif.Tree
You may also wish to check Mocha for Mootools, and JxLib for Mootools, both being UI frameworks.