Alert Directives

alert-directives.markdown

Alert Directives

Using "Alert" and "Modal"

Includes 3 angular directives that simulates the alert with prompt.

A Pen by Nishchith J Bangar on CodePen.

License.

index.html

<head>
  <script>
  </script>
</head>

<body ng-app="myApp" ng-controller="myAppController">

  <br>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3">
      <button class="btn btn-info  " ng-click="triggerSimpleAlert()">  Simple Alert</button>
    </div>
    <div class="col-sm-2  ">
      <button class="btn btn-success   " ng-click="triggerAlertWithPrompt()">Alert With Prompt             </button>
    </div>
    <div class="col-sm-2  ">
      <button class="btn btn-danger " ng-click="triggerModal()">Modal Alert</button>
    </div>
  </div>

  <!--Simple Alert Directive -->
  <simple-alert class="simple-alert-position" visible="simpleAlertVisibility" title="Simple Alert">
    {{simpleAlertMessage}}
  </simple-alert>
  <!--Simple Alert Directive -->

  <!--Alert With Prompt Directive -->
  <alert-with-prompt class="alert-with-prompt-position" visible="alertWithPromptVisibility" title=" Alert With Prompt" on-confirm="confirmAlertWithPrompt(message)">
    {{alertWithPromptMessage}}
  </alert-with-prompt>
  <!-- Alert With Prompt Directive -->

  <!--Modal Prompt Directive -->
  <modal-prompt visible="modalPromptVisibility" title="Modal With Prompt" on-confirm="confirmModalWithPrompt(message)">
    {{modalPromptMessage}}
     
  </modal-prompt>
  <!--Modal Prompt Directive -->

 
</body>

script.js

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

//----------Alert Directive--------------------------
myApp.directive('simpleAlert', function($timeout) {
  return {
    template: "<div class='container-fluid col-sm-5 col-sm-offset-3 alert alert-success fade in' role='alert'>" +
      "<div class='row'>" +
      "<div class='col-sm-12 text-center' style='color:Green;font-weight:bold;font-size:x-large'>Alert..!" +
      "</div>" +
      "</div>" +
      "<div class='row' style='color:black;'>" +
      "<div class='col-sm-10 col-sm-offset-1'>" +
      "<label class='control-label' ng-transclude></label>" +
      "</div>" +
      "</div>" +
      "</div>",

    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      visible: '=',
      title: "@",
      onConfirm: "&"
    },
    controller: ['$scope', function($scope) {
      // console.log("Visble  :   "+$scope.visible);
      // console.log("Title  :   "+$scope.title);
      this.title = $scope.title;
      $scope.confirmAlert = function() {
        // console.log("Template Confirm Alert()-----");
        $scope.onConfirm({
          message: "success"
        });
      };

    }],
    link: function(scope, ele, attr, ctrl) {
      // console.log("Link Visble  :   "+scope.visible);
      // console.log(" Link Title  :   "+scope.title);
      //  console.log(" Ctrl Title  :   "+ctrl.title);
      /* $timeout(function(){
        scope.onConfirm({message:"success"});
    },5000); */
      scope.$watch(function(scope) {
        return scope.visible;
      }, function(value) {
        // console.log("----visible\(Simple Alert\) watch  ---  :  "+value);
        if (value == false) {
          $(ele).hide(); //jQuery
        } else if (value == true) {
          $(ele).show(); //jQuery
        }
      });
    }
  }
});
//----------Alert With Prompt Directive--------------------------
myApp.directive('alertWithPrompt', function($timeout) {
  return {
    template: "<div class='container-fluid col-sm-5 col-sm-offset-3 alert alert-success fade in' role='alert'>" +
      "<div class='row'>" +
      "<div class='col-sm-12 text-center' style='color:Green;font-weight:bold;font-size:x-large'>Alert..!" +
      "</div>" +
      "</div>" +
      "<div class='row' style='color:black;'>" +
      "<div class='col-sm-10 col-sm-offset-1'>" +
      "<label class='control-label' ng-transclude></label>" +
      "</div>" +
      "</div>" +
      "<div class='row' >" +
      "<div class='col-sm-1  col-sm-offset-7'>" +
      "<button class='btn btn-success btn-xs' ng-click='confirmAlert()'>Confirm</button>" +
      "</div><div class='col-sm-1'></div>" +
      "<div class='col-sm-1 ' style='margin-left:5px;'>" +
      "<button class='btn btn-danger btn-xs' ng-click='cancelAlert()'>Cancel</button>" +
      "</div>" +
      "</div>" +

      "</div>",

    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      visible: '=',
      title: "@",
      onConfirm: "&"
    },
    controller: ['$scope', function($scope) {
      // console.log("Visble  :   "+$scope.visible);
      // console.log("Title  :   "+$scope.title);
      this.title = $scope.title;
      $scope.confirmAlert = function() {
        console.log("Template Confirm Alert()-----");
        $scope.onConfirm({
          message: "success"
        });
        $scope.visible = false;
      };
      $scope.cancelAlert = function() {
          console.log("Scope.element" + $scope.element);

          $scope.visible = false;
        };
    }],
    link: function(scope, ele, attr, ctrl) {
      scope.element = ele;
      // console.log("Link Visble  :   "+scope.visible);
      // console.log(" Link Title  :   "+scope.title);
      //  console.log(" Ctrl Title  :   "+ctrl.title);
      /* $timeout(function(){
        scope.onConfirm({message:"success"});
    },5000); */
      scope.$watch(function(scope) {
        return scope.visible;
      }, function(value) {
        // console.log("----visible\(Simple Alert\) watch  ---  :  "+value);
        if (value == false) {
          $(ele).hide(); //jQuery
        } else if (value == true) {
          $(ele).show(); //jQuery
        } else {
          $(ele).hide(); //jQuery
        } 
      });
    }
  }
});
// ---------Modal Prompt directive--------------------------
myApp
  .directive(
    'modalPrompt',
    function() {
      return {
        template: '<div class="modal fade in" data-backdrop=\x22static\x22 data-keyboard=false>' +
          '<div class="modal-dialog modal-sm">' +
          '<div class="modal-content">' +
          '<div class="modal-header" style="background-color:black;color:white;">' +
          '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancelModal()"' +
          'style="color:white">&times;' +
          '</button>' +
          '<h4 class="modal-title" style="font-weight: bolder;"> {{title}} </h4>' +
          '</div>' +
          '<div class="modal-body" >'+
          '<p  style="font-weight:bold" ng-transclude></p>'
        +'</div>' +
          '<div class="modal-footer"><button class="btn btn-xs btn-success" ng-click="confirmModal()" style="background-color:#8FBC8F;color:black;font-weight:bold;">' +
          'OK</button>' +
          /* '<button class="btn btn-xs btn-danger  " ng-click="cancelModal()" >' +
          'Cancel</button>' + */
          '</div>' +
          '</div>' +
          '</div>' +

          '</div>' +
          '</div>' +
          '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
          visible: '=',
          title: '@',
          onConfirm: '&'
        },
        controller: ['$scope', function($scope) {
          $scope.confirmModal = function() {
            console.log("---Template Confirm Modal ()------");
            $scope.onConfirm({
              message: "Succcess"
            });
            $scope.visible=false;
          };
          $scope.cancelModal=function(){
            $scope.visible=false;
          };

        }],
        link: function postLink(scope, element, attrs) {
          /*  scope.$watch(scope.title, function(value) {
             // console.log("attrs.title  "  +value)  
             scope.title = attrs.title;
           }); */

          scope.$watch(function(scope) {
            return scope.visible;
          }, function(value) {
            if (value == true)
              $(element).modal('show');
            else
              $(element).modal('hide');
            //scope.$digest();
          });

          $(element).on('shown.bs.modal', function() {
            scope.$apply(function() {
              scope.$parent[scope.visible] = true;

            });
          });

          $(element).on('hidden.bs.modal', function() {
            scope.$apply(function() {
              scope.$parent[scope.visible] = false;
            });
          });

        }
      };
    });
// ------------------------------

//----Controller-----------------
myApp.controller("myAppController", ['$scope', function($scope) {
  console.log("---My App Controller ----");
  $scope.openModal = false;

  //*********Alert Related Vars**********
  $scope.simpleAlertVisibility = false;
  $scope.alertWithPromptVisibility = false;
  $scope.modalPromptVisibility=false;
  $scope.simpleAlertMessage = "";
  $scope.alertWithPromptMessage = "";
  $scope.modalPromptMessage="";
  //****************************************
  //----Trigger Simple Alert----------
  $scope.triggerSimpleAlert = function() {
    console.log("---Simplet Alert()-----");
    $scope.simpleAlertMessage = "Alert  message  to be displaced in 'Simple Alert Directive' as part of 'ng-transclude'";
    $scope.simpleAlertVisibility = !$scope.simpleAlertVisibility;
    // console.log("---simpleAlertVisibility parent---"+$scope.simpleAlertVisibility);
  };
  //----Trigger Alert With Prompt------
  $scope.triggerAlertWithPrompt = function() {
    console.log("-----Alert With Prompt()----");
    $scope.alertWithPromptVisibility = !$scope.alertWithPromptVisibility;
    $scope.alertWithPromptMessage = "Alert message to be displace in 'Alert With Prompt Directive' as part of 'ng-transclude'";
  };

  //----Trigger Modal------------------
  $scope.triggerModal = function() {
    console.log("------ Modal ()----");
    $scope.modalPromptMessage = "Alert as Modal with prompt buttons";
    $scope.modalPromptVisibility = !$scope.modalPromptVisibility;
  };

  //-----Confirm Alert---------
  $scope.confirmSimpleAlert = function(message) {
    console.log("---Inside Confirm Simple Alert  :  " + message);
  };
  //-----Confirm Alert With Prompt---------
  $scope.confirmAlertWithPrompt = function(message) {
    console.log("---Inside Confirm  Alert With Prompt  :  " + message);
  };
  //-----Confirm Modal With Prompt---------
  $scope.confirmModalWithPrompt = function(message) {
    console.log("---Inside Confirm  Modal With Prompt  :  " + message);
  }; 
}]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

 /* .simple-alert-position{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
    background: rgba(76, 175, 80, 0.3); 
  
}   */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />