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

<html ng-app="MyApp">
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript">
    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;
        };
    });
</script>
</head>
<body ng-controller="MyController">

    <button class="btn btn-primary" ng-click="open()">Test Modal</button>

    <!-- Confirmation Dialog -->
    <div class="modal" modal="showModal" close="cancel()">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Delete confirmation</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">No</button>
            <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Confirmation Dialog -->

 </body>
 </html>

since you are using Angular and Bootstrap I would use the modal form here: angular-ui.github.io/bootstrap — Jax
– Jax, Commented Apr 28, 2015 at 13:52
Here you have an easy example of how to use modal with angularjs — Jorge Casariego
– Jorge Casariego, Commented Apr 28, 2015 at 14:20

Har devgun · Accepted Answer · 2015-10-13 05:47:55Z

11

Hope this will help you .

Here is Html code:-

    <body>
    <div ng-controller="MyController" class="container">
      <h1>Modal example</h1>
      <button ng-click="open()" class="btn btn-primary">Test Modal</button>

      <modal title="Login form" visible="showModal">
        <form role="form">

        </form>
      </modal>
    </div>
</body>

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: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ title }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      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

answered Oct 13, 2015 at 5:47

Har devgun

5336 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

truffle Over a year ago

When I click the "Test Modal", nothing happens. not modal appears and no error in Console log. Does this happen for anyone else?

Tamara Over a year ago

@truffle nothing happens in Safari

Har devgun Over a year ago

@Tamara, it works fine when i was working with this but now i m facing the same problem, may be it only occurs because of animations. So try to disabling animation on modal.

Har devgun Over a year ago

check this sample,hope will help you :) plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

dbrree Over a year ago

@Hardevgun, what's the point in making a new controller for the modal? Why not just use the 'MyController'? Also, what is the use of $scope.checkItem = ""; I'm learning as well and trying to understand the usage of these things here.

jales cardoso · Accepted Answer · 2017-08-10 18:56:03Z

3

Set Jquery in scope

$scope.$ = $;

and call in html

ng-click="$('#novoModelo').modal('show')"

answered Aug 10, 2017 at 18:56

jales cardoso

6368 silver badges14 bronze badges

Comments

Stephen Rodriguez · Accepted Answer · 2015-04-28 13:55:16Z

2

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

<!-- Confirmation Dialog -->
<div class="modal" modal="showModal" ng-show="showModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Delete confirmation</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">No</button>
        <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button>
      </div>
    </div>
  </div>
</div>
<!-- End of Confirmation Dialog -->

answered Apr 28, 2015 at 13:55

Stephen Rodriguez

1,0371 gold badge12 silver badges22 bronze badges

2 Comments

blue piranha Over a year ago

Sorry but this code doesn't seem to work. Are we missing anything else out here?

Stephen Rodriguez Over a year ago

yes, declare showModal as a variable outside of the $scope function calls

Ritt · Accepted Answer · 2015-04-28 14:09:40Z

2

I am not sure,how you are opening popup or say model in your code. But you can try something like this..

<html ng-app="MyApp">
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript">
    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();
                            };
                        }
                    });
      }
    });
</script>
</head>
<body ng-controller="MyController">

    <button class="btn btn-primary" ng-click="open()">Test Modal</button>

    <!-- Confirmation Dialog -->
    <div class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Delete confirmation</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="cancel()">No</button>
            <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Confirmation Dialog -->

 </body>
 </html>

answered Apr 28, 2015 at 14:09

Ritt

3,3693 gold badges27 silver badges55 bronze badges

2 Comments

blue piranha Over a year ago

ReferenceError: $modal is not defined

Ritt Over a year ago

angular-ui.github.io/bootstrap use this bootstrap library,it is compatible it is compatible with angular,search for $modal.

Collectives™ on Stack Overflow

AngularJS open modal on button click

4 Answers 4

5 Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related