Simple Popup by using Angular JS

Question

I am new to using AngularJS. I have 4 buttons named Cancel, Deny, Success & Remove. If am I click on any button I want to show multiple message i.e. If I click on Cancel

Answer 1

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

  Success
  Remove
  Deny
  Cancel
  
      Any additional data / buttons
  

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: '
' + 
          '
' + 
            '
' + 
              '
' + 
                '×' + 
                '
{{ buttonClicked }} clicked!!
' + 
              '
' + 
              '
' + 
            '
' + 
          '
' + 
        '
',
      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

  Success
  Remove
  Deny
  Cancel
  
      Any additional data / buttons
  


        
    




    
    

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

Other values are 'A' for attribute

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