AngularJS open modal on button click

Question

I am trying to learn to open a modal dialog box at the click of the button in AngularJS but unable to do so  I checked the chrome console but there are no errors  Also  since I am learning AngularJS  please advice what to do when chrome console doesn t show any errors   Here is my code   lt html ng-app  MyApp  gt   lt head gt    lt script type  text javascript  src  https   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt   lt link rel  stylesheet  href  css bootstrap min css    gt    lt script type  text javascript  gt      var myApp   angular module  MyApp            myApp controller  MyController   function   scope              scope open   function                   scope showModal   true                       scope ok   function                   scope showModal   false                       scope cancel   function                   scope showModal   false                      lt  script gt   lt  head gt   lt body ng-controller  MyController  gt        lt button class  btn btn-primary  ng-click  open    gt Test Modal lt  button gt        lt  -- Confirmation Dialog -- gt       lt div class  modal  modal  showModal  close  cancel    gt         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    lt  button gt               lt h4 class  modal-title  gt Delete confirmation lt  h4 gt             lt  div gt             lt div class  modal-body  gt               lt p gt Are you sure  lt  p gt             lt  div gt             lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  ng-click  cancel    gt No lt  button gt               lt button type  button  class  btn btn-primary  ng-click  ok    gt Yes lt  button gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt       lt  -- End of Confirmation Dialog -- gt     lt  body gt    lt  html gt

User · Answer

Set Jquery in scope   scope         and call in html   ng-click      novoModelo   modal  show

User · Answer

You should take a look at Batarang for AngularJS debugging  As for your issue   Your scope variable is not directly attached to the modal correctly  Below is the adjusted code  You need to specify when the modal shows using ng-show   lt  -- Confirmation Dialog -- gt   lt div class  modal  modal  showModal  ng-show  showModal  gt     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    lt  button gt           lt h4 class  modal-title  gt Delete confirmation lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt p gt Are you sure  lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  ng-click  cancel    gt No lt  button gt           lt button type  button  class  btn btn-primary  ng-click  ok    gt Yes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt  -- End of Confirmation Dialog -- gt

User · Answer

Hope this will help you    Here is Html code -       lt body gt       lt div ng-controller  MyController  class  container  gt         lt h1 gt Modal example lt  h1 gt         lt button ng-click  open    class  btn btn-primary  gt Test Modal lt  button gt          lt modal title  Login form  visible  showModal  gt           lt form role  form  gt            lt  form gt         lt  modal gt       lt  div gt   lt  body gt    AngularJs code -  var mymodal   angular module  mymodal         mymodal controller  MyController   function   scope         scope showModal   false       scope open   function         scope showModal     scope showModal                mymodal directive  modal   function          return         template    lt div class  modal fade  gt                  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    title    lt  h4 gt                      lt  div gt                      lt div class  modal-body  ng-transclude gt  lt  div gt                    lt  div gt                  lt  div gt                lt  div gt          restrict   E         transclude  true        replace true        scope true        link  function postLink scope  element  attrs            scope title   attrs title           scope  watch attrs visible  function value             if value    true                element  modal  show              else               element  modal  hide                           element  on  shown bs modal   function              scope  apply function                scope  parent attrs visible    true                                       element  on  hidden bs modal   function              scope  apply function                scope  parent attrs visible    false                                                   Check this--jsfiddle

User · Answer

I am not sure how you are opening popup or say model in your code  But you can try something like this     lt html ng-app  MyApp  gt   lt head gt    lt script type  text javascript  src  https   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt   lt link rel  stylesheet  href  css bootstrap min css    gt    lt script type  text javascript  gt      var myApp   angular module  MyApp            myApp controller  MyController   function   scope           scope open   function            var modalInstance    modal open                           templateUrl    assets yourOpupTemplatename html                           backdrop  static                           keyboard false                          controller  function  scope   modalInstance                                 scope cancel   function                                      modalInstance dismiss  cancel                                                                scope ok   function                                     modalInstance close                                                                                                      lt  script gt   lt  head gt   lt body ng-controller  MyController  gt        lt button class  btn btn-primary  ng-click  open    gt Test Modal lt  button gt        lt  -- Confirmation Dialog -- gt       lt div class  modal  gt         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    lt  button gt               lt h4 class  modal-title  gt Delete confirmation lt  h4 gt             lt  div gt             lt div class  modal-body  gt               lt p gt Are you sure  lt  p gt             lt  div gt             lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  ng-click  cancel    gt No lt  button gt               lt button type  button  class  btn btn-primary  ng-click  ok    gt Yes lt  button gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt       lt  -- End of Confirmation Dialog -- gt     lt  body gt    lt  html gt

[angularjs] AngularJS open modal on button click

Examples related to angularjs