Show pop-ups the most elegant way

Question

I have this AngularJS app  Everything works just fine   Now I need to show different pop-ups when specific conditions become true  and I was wondering what would be the best way to proceed   Currently I   m evaluating two options  but I   m absolutely open to other options     Option 1  I could create the new HTML element for the pop-up  and append to the DOM directly from the controller   This will break the MVC design pattern  I   m not happy with this solution     Option 2  I could always insert the code for all the pop-ups in the static HTML file  Then  using ngShow  I can hide   show only the correct pop-up   This option is not really scalable     So I   m pretty sure there has to be a better way to achieve what I want

User · Answer

It s funny because I m learning Angular myself and was watching some video s from their channel on Youtube  The speaker mentions your exact problem in this video https   www youtube com watch v ZhfUv0spHCY t 1681 around the 28 30 minute mark   It comes down to placing that particular piece of code in a service rather then a controller   My guess would be to inject new popup elements into the DOM and handle them separate instead of showing and hiding the same element  This way you can have multiple popups   The whole video is very interesting to watch as well  -

User · Answer

Create a  popup  directive and apply it to the container of the popup content In the directive  wrap the content in a absolute position div along with the mask div below it  It is OK to move the 2 divs in the DOM tree as needed from within the directive  Any UI code is OK in the directives  including the code to position the popup in center of screen  Create and bind a boolean flag to controller  This flag will control visibility  Create scope variables that bond to OK   Cancel functions etc    Editing to add a high level example  non functional    lt div id  popup1-content  popup  showPopup1  gt                 lt  div gt     lt div id  popup2-content  popup  showPopup2  gt                 lt  div gt      directive  popup   function       var p           link   function scope  iElement  iAttrs                code to wrap the div  iElement  with a abs pos div  parentDiv               code to add a mask layer div behind               if the parent is already there  then skip adding it again             use jquery ui to make it dragable etc            scope watch showPopup  function newVal  oldVal                  if newVal     true                        parentDiv  show                                      else                     parentDiv  hide                                                     return p

User · Answer

Angular-ui comes with dialog directive Use it and set templateurl to whatever page you want to include That is the most elegant way and i have used it in my project as well  You can pass several other parameters for dialog as per need

User · Answer

See  http   adamalbrecht com 2013 12 12 creating-a-simple-modal-dialog-directive-in-angular-js  for a simple way of doing modal dialog with Angular and without needing bootstrap  Edit  I ve since been using ng-dialog from http   likeastore github io ngDialog which is flexible and doesn t have any dependencies

User · Answer

Based on my experience with AngularJS modals so far I believe that the most elegant approach is a dedicated service to which we can provide a partial  HTML  template to be displayed in a modal   When we think about it modals are kind of AngularJS routes but just displayed in modal popup    The AngularUI bootstrap project  http   angular-ui github com bootstrap   has an excellent  modal service  used to be called  dialog prior to version 0 6 0  that is an implementation of a service to display partial s content as a modal popup

[javascript] Show pop-ups the most elegant way

Examples related to javascript

Examples related to model-view-controller

Examples related to angularjs

Examples related to show-hide

[javascript] Show pop-ups the most elegant way

Examples related to javascript

Examples related to model-view-controller

Examples related to angularjs

Examples related to popup

Examples related to show-hide