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.
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 just to pop up a window that has some static text and just one Ok button.
I know java\swing has a bunch of precanned classes that can just using one line of code that makes things very clean.
All of the angular pop ups I have seem like a lot code to implement for such simple piece of code. Angugular is supposed to make things easy to implement things there must be some easy one line methods that can be called.
Thank you very much for all of your help!!
I think you'll need to compromise when it comes to Angular because from my experience there's no pre-canned solution for popups that's ALSO powerful and customizable (talking about alert). What you should do is make a wrapper over a good popup library to suit your needs.
I think what you can do is to take ui-bootstrap's modal and Wrap all of the code needed for a popup in a factory.
Doing this will make it so that you can call the factory in any of your controllers and invoke a popup behaviour in ONE clean and easy to use line.
There isn't. You have two options: 1. use uib modal from the ui bootstrap package. It take few lines of code... 2. write your own directive that wraps solution 1 to one line of code :)
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
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.
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.