Invoking modal window in AngularJS Bootstrap UI using JavaScript

Question

Using the example mentioned here  how can I invoke the modal window using JavaScript instead of clicking a button   I am new to AngularJS and tried searching the documentation here and here without luck   Thanks

User · Answer

The AngularJS Bootstrap website hasn t been updated with the latest documentation  About 3 months ago pkozlowski-opensource authored a change to separate out  modal from  dialog commit is below   https   github com angular-ui bootstrap commit d7a48523e437b0a94615350a59be1588dbdd86bd   In that commit he added new documentation for  modal  which can be found below   https   github com angular-ui bootstrap blob d7a48523e437b0a94615350a59be1588dbdd86bd src modal docs readme md    Hope this helps

User · Answer

Open modal windows with passing data to dialog In case if someone interests to pass data to dialog  app controller  ModalCtrl   function  scope    modal                  scope name    theNameHasBeenPassed           scope showModal   function                       scope opts             backdrop  true          backdropClick  true          dialogFade  false          keyboard  true          templateUrl    modalContent html           controller   ModalInstanceCtrl          resolve        empty storage                                           scope opts resolve item   function                 return angular copy                                   name   scope name                                  pass name to resolve storage                              var modalInstance    modal open  scope opts                        modalInstance result then function                  on ok button press              function                  on cancel button press             console log  quot Modal Closed quot                                                  var ModalInstanceCtrl   function  scope   modalInstance   modal  item               scope item   item              scope ok   function               modalInstance close                           scope cancel   function               modalInstance dismiss  cancel                Demo Plunker

User · Answer

OK  so first of all the http   angular-ui github io bootstrap  has a  lt modal gt  directive and the  dialog service and both of those can be used to open modal windows   The difference is that with the  lt modal gt  directive content of a modal is embedded in a hosting template  one that triggers modal window opening   The  dialog service is far more flexible and allow you to load modal s content from a separate file as well as trigger modal windows from any place in AngularJS code  this being a controller  a service or another directive    Not sure what you mean exactly by  using JavaScript code  but assuming that you mean any place in AngularJS code the  dialog service is probably a way to go   It is very easy to use and in its simplest form you could just write    dialog dialog     open  modalContent html        To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer  3 seconds after a controller was instantiated   function DialogDemoCtrl  scope   timeout   dialog      timeout function         dialog dialog     open  modalContent html           3000         This can be seen in action in this plunk  http   plnkr co edit u9HHaRlHnko492WDtmRU p preview  Finally  here is the full reference documentation to the  dialog service described here  https   github com angular-ui bootstrap blob master src dialog README md

User · Answer

Different version similar to the one offered by Maxim Shoustin  I liked the answer but the part that bothered me was the use of  lt script id       gt  as a container for the modal s template   I wanted to place the modal s template in a hidden  lt div gt  and bind the inner html with a scope variable called modal html template  mainly because i think it more correct  and more comfortable to process in WebStorm PyCharm  to place the template s html inside a  lt div gt  instead of  lt script id       gt   this variable will be used when calling  modal       template    scope modal html template          in order to bind the inner html  i created inner-html-bind which is a simple directive  check out the example plunker   lt div ng-controller  ModalDemoCtrl  gt        lt div inner-html-bind inner-html  modal html template  class  hidden  gt           lt div class  modal-header  gt               lt h3 gt I m a modal  lt  h3 gt           lt  div gt           lt div class  modal-body  gt               lt ul gt                   lt li ng-repeat  item in items  gt                       lt a ng-click  selected item   item  gt    item    lt  a gt                   lt  li gt               lt  ul gt              Selected   lt b gt    selected item    lt  b gt           lt  div gt           lt div class  modal-footer  gt               lt button class  btn btn-primary  ng-click  ok    gt OK lt  button gt               lt button class  btn btn-warning  ng-click  cancel    gt Cancel lt  button gt           lt  div gt       lt  div gt        lt button class  btn  ng-click  open    gt Open me  lt  button gt       lt div ng-show  selected  gt Selection from a modal     selected    lt  div gt   lt  div gt    inner-html-bind directive   app directive  innerHtmlBind   function       return       restrict   A       scope          inner html    innerHtml             link  function scope  element  attrs          scope inner html   element html

User · Answer

Quick and Dirty Way   It s not a good way  but for me it seems the most simplest    Add an anchor tag which contains the modal data-target and data-toggle  have an id associated with it   Can be added mostly anywhere in the html view    lt a href    data-toggle  modal  data-target   myModal  id  myModalShower  gt  lt  a gt    Now    Inside the angular controller  from where you want to trigger the modal just use  angular element   myModalShower   trigger  click      This will mimic a click to the button based on the angular code and the modal will appear

User · Answer

To make angular ui  modal work with bootstrap 3 you need to overwrite the styles   modal       display  block     modal-body before   modal-body after       display  table      content          modal-header before   modal-header after       display  table      content            The last ones are necessary if you use custom directives  and encapsulate the html with    lt div class  modal-dialog  gt     lt div class  modal-content  gt       lt div class  modal-header  gt         lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt         lt h4 class  modal-title  gt Modal title lt  h4 gt       lt  div gt       lt div class  modal-body  gt                 lt  div gt       lt div class  modal-footer  gt         lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt         lt button type  button  class  btn btn-primary  gt Save changes lt  button gt       lt  div gt     lt  div gt  lt  --   modal-content -- gt   lt  div gt  lt  --   modal-dialog -- gt

[angularjs] Invoking modal window in AngularJS Bootstrap UI using JavaScript

Examples related to angularjs

Examples related to angular-ui-bootstrap

[angularjs] Invoking modal window in AngularJS Bootstrap UI using JavaScript

Examples related to angularjs

Examples related to modal-dialog

Examples related to angular-ui-bootstrap