Closing Twitter Bootstrap Modal From Angular Controller

Question

I have a modal window that I use to present a form to users   They enter the information and then press a button the has an ng-click   The server processes the request and sends back a response   When the response is success I want to close the modal window from the controller   How can this be achieved   The modal is a partial included in another page  Main page    lt  -- main content -- gt   lt p gt Foo lt  p gt   lt  -- angular directive -- gt   lt foo-directive gt  lt  foo-directive gt    Content of that directive    lt div ng-controller  FooCtrl  gt       lt ul class  thumbnails  gt           lt li class  span3 tile tile-white  ng-repeat  foo in model foo  gt               lt div gt                    foo bar                lt  div gt               lt div gt                     foo bam                 lt  div gt               lt div gt                   lt a data-toggle  modal  href   myModal  gt  lt img src    foo imgPath    gt  lt  a gt               lt  div gt           lt  li gt       lt  ul gt       lt  -- foo modal partial included by ejs -- gt       lt   include foo modal ejs   gt   lt  div gt    Modal markup    lt div id  fooModal  class  modal hide fade in  style  display  none    gt       lt div class  modal-header  gt           lt a class  close  data-dismiss  modal  gt    lt  a gt           lt h3 gt New Device lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt h4 gt Foo Modal lt  h4 gt           lt div ng-controller  FooCtrl  gt               lt form name  fooFrm  gt                   lt input id  email  type  email  class  input-medium  ng-model  fooEmail                         placeholder  Email  gt                   lt button class  btn btn-primary btn-small                          ng-click  doFoo  email fooEmail    gt Email Link lt  button gt               lt  form gt           lt  div gt       lt  div gt       lt div class  modal-footer  gt           lt a href     class  btn  data-dismiss  modal  gt Close lt  a gt       lt  div gt   lt  div gt    Controller code   functionFooCtrl  scope  FooService           scope doFoo  function  email           FooService save  email email fooEmail                 alert  Request successful                  TODO close Twitter bootstrap modal named fooModal here                        function  err                    alert  Your request bonked  sorry                      TODO close twitter bootstrap modal named fooModal here                                    What is the right way to close the modal from the controller in the success and error functions   Thanks in advance

User · Answer

Here s a reusable Angular directive that will hide and show a Bootstrap modal   app directive  modalShow   function          return           restrict   A           scope                modalVisible                         link  function  scope  element  attrs                   Hide or show the modal             scope showModal   function  visible                    if  visible                                        element modal  show                                      else                                       element modal  hide                                                   Check to see if the modal-visible attribute exists             if   attrs modalVisible                                   The attribute isn t defined  show the modal by default                 scope showModal true                              else                                  Watch for changes to the modal-visible attribute                 scope  watch  modalVisible   function  newValue  oldValue                        scope showModal newValue                                          Update the visible value when the dialog is closed through UI actions  Ok  cancel  etc                   element bind  hide bs modal   function                          scope modalVisible   false                      if   scope   phase  amp  amp   scope  root   phase                          scope  apply                                                                Usage Example  1 - this assumes you want to show the modal - you could add ng-if as a condition   lt div modal-show class  modal fade  gt     bootstrap modal     lt  div gt    Usage Example  2 - this uses an Angular expression in the modal-visible attribute   lt div modal-show modal-visible  showDialog  class  modal fade  gt     bootstrap modal     lt  div gt    Another Example - to demo the controller interaction  you could add something like this to your controller and it will show the modal after 2 seconds and then hide it after 5 seconds    scope showDialog   false   timeout function       scope showDialog   true     2000   timeout function       scope showDialog   false     5000    I m late to contribute to this question - created this directive for another question here  Simple Angular Directive for Bootstrap Modal  Hope this helps

User · Answer

I have remixed the answer by  isubuz and this answer by  Umur Kontaci on attribute directives into a version where your controller doesn t call a DOM-like operation like  dismiss   but instead tries to be more MVVM style  setting a boolean property isInEditMode  The view in turn links this bit of info to the attribute directive that opens closes the bootstrap modal    x000D   x000D  var app   angular module  myApp        x000D   x000D  app directive  myModal   function     x000D     return   x000D       restrict   A   x000D       scope    myModalIsOpen         x000D       link  function scope  element  attr    x000D         scope  watch  x000D           function     return scope myModalIsOpen     x000D           function     element modal scope myModalIsOpen    show     hide      x000D            x000D         x000D        x000D      x000D   x000D  app controller  MyCtrl   function  scope    x000D     scope isInEditMode   false  x000D     scope toggleEditMode   function      x000D       scope isInEditMode     scope isInEditMode  x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 6 js bootstrap js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 5 7 angular js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 6 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt div ng-app  myApp  ng-controller  MyCtrl as vm  gt  x000D   x000D   lt div class  modal fade  my-modal my-modal-is-open  isInEditMode  gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-body  gt  x000D          Modal body  IsInEditMode      isInEditMode   x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button class  btn  ng-click  toggleEditMode    gt Close lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt p gt  lt button class  btn  ng-click  toggleEditMode    gt Toggle Edit Mode lt  button gt  lt  p gt   x000D   lt pre gt isInEditMode      isInEditMode   lt  pre gt  x000D     x000D   lt  div gt  x000D   x000D   x000D

User · Answer

We can achieve the same without using angular-ui  This can be done using angular directives   First add the directive to the modal    lt div class  modal fade  my-modal      gt     lt  div gt    Create a new angular directive   app directive  myModal   function        return        restrict   A        link  function scope  element  attr           scope dismiss   function                element modal  hide                                 Now call the dismiss   method from your controller   app controller  MyCtrl   function  scope   http           You can call dismiss   here      scope dismiss          I am still in my early days with angular js  I know that we should not manipulate the DOM inside the controllers  So I have the DOM manipulation in the directive  I am not sure if this is equally bad  If I have a better alternative  I shall post it here   The important thing to note is that we cannot simply use ng-hide or ng-show in the view to hide or show the modal  That simply hides the modal and not the modal backdrop  We have to call the modal   instance method to completely remove the modal

User · Answer

You can do it like this   angular element   modal   modal  hide

User · Answer

just fire bootstrap modal close button click event   var app   angular module  myApp        app controller  myCtrl  function  scope  http         btnClose   click      this is bootstrap modal close button id that fire click event     --------------------------------------------------------------------------------   lt div class  modal fade  id  myModal  role  dialog  gt       lt div class  modal-dialog  gt         lt div class  modal-content  gt           lt div class  modal-header  gt           lt  div gt           lt div class  modal-body  gt             lt p gt Some text in the modal  lt  p gt           lt  div gt           lt div class  modal-footer  gt             lt button type  button  id  btnClose  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt    just set modal  close button  id as i set btnClose  for closing modal in angular you have to just fire that close button click event as i did      btnClose   click

User · Answer

You can do it with a simple jquery code       Mymodal   modal  hide

User · Answer

You can add data-dismiss  modal  to your button attributes which call angularjs funtion   Such as    lt button type  button  class  btn btn-default  data-dismiss  modal  gt Send Form lt  button gt

User · Answer

Have you looked at angular-ui bootstrap   There s a Dialog  ui bootstrap dialog  directive that works quite well  You can close the dialog during the call back the angular way  per the example     scope close   function result     dialog close result        Update   The directive has since been renamed Modal

[twitter-bootstrap] Closing Twitter Bootstrap Modal From Angular Controller

Examples related to twitter-bootstrap

Examples related to angularjs

Examples related to angularjs-directive