What is the easiest way to handle modals in Angular JS?

Problem: how do I manage a bunch of modals in an Angular JS controller?

I put them at the bottom of my view and using http://angular-ui.imtqy.com/bootstrap/#/modal but I came across large html templates (which works) but I feel inefficient.

What I tried:

  • Dialogue
  • $ from UI-Bootstrap (butt pain)
  • Modals stored in templates included via ng-include using the UI-Bootstrap modal
  • set at the bottom of my view in the controller <currently works and works

It feels like I'm missing something. Any pointers?

EDIT:

I did a lot of searching and found a script, and then updated it a bit:

  • Your Modules are External Templates
  • They are also in the area where you pressed the button
  • 3 different types (Confirm, Message, Download Template)

https://github.com/clouddueling/angularjs-modals

Update

Since then I made a repo covering this problem: http://clouddueling.imtqy.com/angular-common/

+6
source share
1 answer

As stated in rGil, use a directive of your own, not UI-Bootstrap, if it seems too confusing. All your modalities will be similar, more or less. To fill the modality you just need to have a template and 2-3 sphere variables. You can then pass parameters to open and close modal functions and offer additional functions. The more you include, the greater the directive will be.

The second option is to create separate partial HTML parts with these modules, and then just use ngInclude to place them in your views. This will be a huge time saver if your modals are different, but are often used on several pages. The down side of this is that you still need to switch it open and closed. Angular's way would be to write a directive to handle only switching if that's all you need. The easy way is to write a little jQuery and open a modal click or something else.

Honestly, it all depends on your level of comfort. Will jQuery destroy your code? No, but this is not the "Angular path". With jQuery, I can write modal toggle in 3-4 lines of code. Executing this path Angular is a directive and a dozen + lines of code. But the Angular way has the advantage of writing a tag in the future and no longer needs code. If I have only one modal, I can do it in jQuery. If I have several modals, as in your case, I can spend time studying directives and come up with one that works, the way I want it to work.

+8
source

Source: https://habr.com/ru/post/945736/


All Articles