Simple Popup by using Angular JS

Question

I am new to using AngularJS  I have 4 buttons named Cancel  Deny  Success  amp  Remove  If am I click on any button I want to show multiple message i e  If I click on Cancel then message showing you click on Cancel button  amp  so on   I have follow from below link but simple alert  amp  no controller is used in this example   I want a A MODAL POPUP IN AN ANGULARJS DIRECTIVE example so I can understand  I have try to google it but no simple examples found   Please help  Thanks   lt  doctype html gt   lt html ng-app  mymodal  gt     lt body gt    lt div ng-controller  MainCtrl  class  container  gt     lt button ng-click  toggleModal  Success    class  btn btn-default  gt Success lt  button gt     lt button ng-click  toggleModal  Remove    class  btn btn-default  gt Remove lt  button gt     lt button ng-click  toggleModal  Deny    class  btn btn-default  gt Deny lt  button gt     lt button ng-click  toggleModal  Cancel    class  btn btn-default  gt Cancel lt  button gt     lt modal visible  showModal  gt        Any additional data   buttons    lt  modal gt   lt  div gt            lt  -- Scripts -- gt       lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt   lt script src  http   netdna bootstrapcdn com bootstrap 3 0 3 js bootstrap min js  gt  lt  script gt   lt script src  http   netdna bootstrapcdn com bootstrap 3 0 3 css bootstrap min css  gt  lt  script gt         lt  -- App -- gt       lt script gt          var mymodal   angular module  mymodal         mymodal controller  MainCtrl   function   scope         scope showModal   false       scope buttonClicked            scope toggleModal   function btnClicked            scope buttonClicked   btnClicked           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    buttonClicked    clicked   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  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                                                          lt  script gt   lt  body gt   lt  html gt   Link   http   plnkr co edit  p preview

User · Accepted Answer

Built a modal popup example using syarul's jsFiddle link. Here is the updated fiddle.

Created an angular directive called modal and used in html. Explanation:-

HTML

<div ng-controller="MainCtrl" class="container">
  <button ng-click="toggleModal('Success')" class="btn btn-default">Success</button>
  <button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button>
  <button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button>
  <button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button>
  <modal visible="showModal">
      Any additional data / buttons
  </modal>
</div>

On button click toggleModal() function is called with the button message as parameter. This function toggles the visibility of popup. Any tags that you put inside will show up in the popup as content since ng-transclude is placed on modal-body in the directive template.

JS

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.showModal = false;
    $scope.buttonClicked = "";
    $scope.toggleModal = function(btnClicked){
        $scope.buttonClicked = btnClicked;
        $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">{{ buttonClicked }} clicked!!</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;
          });
        });
      }
    };
  });

UPDATE

<!doctype html>
<html ng-app="mymodal">


<body>

<div ng-controller="MainCtrl" class="container">
  <button ng-click="toggleModal('Success')" class="btn btn-default">Success</button>
  <button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button>
  <button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button>
  <button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button>
  <modal visible="showModal">
      Any additional data / buttons
  </modal>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <!-- Scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

    <!-- App -->
    <script>
        var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
    $scope.showModal = false;
    $scope.buttonClicked = "";
    $scope.toggleModal = function(btnClicked){
        $scope.buttonClicked = btnClicked;
        $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">{{ buttonClicked }} clicked!!</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.$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;
          });
        });
      }
    };
  });

    </script>
</body>
</html>

UPDATE 2 restrict : 'E' : directive to be used as an HTML tag (element). Example in our case is

<modal>

Other values are 'A' for attribute

<div modal>

'C' for class (not preferable in our case because modal is already a class in bootstrap.css)

<div class="modal">

User · Answer

If you are using bootstrap js then the below code might be useful  This is very simple  Dont have to write anything in js to invoke the pop-up   Source  http   www w3schools com bootstrap tryit asp filename trybs modal amp stacked h   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt Bootstrap Example lt  title gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt     lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt   lt  head gt   lt body gt    lt div class  container  gt     lt h2 gt Modal Example lt  h2 gt     lt  -- Trigger the modal with a button -- gt     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt      lt  -- Modal -- gt     lt div class  modal fade  id  myModal  role  dialog  gt       lt div class  modal-dialog  gt          lt  -- Modal content-- gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt             lt h4 class  modal-title  gt Modal Header lt  h4 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  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt  div gt         lt  div gt        lt  div gt     lt  div gt    lt  div gt    lt  body gt   lt  html gt

[angularjs] Simple Popup by using Angular JS

Examples related to angularjs

[angularjs] Simple Popup by using Angular JS

Examples related to angularjs

Examples related to popup