$Uibmodal in Angular.js

$uibmodal is a service to create modal windows. Uibmodal is the UI Bootstrap component written in AngularJS.  It enables us to use Bootstrap in AngularJS. It provides directives for all bootstrap with some extra like, datepicker, timepicker etc. Install uibmodal as shown below.


angular.module('myModule', ['ui.bootstrap']);


$uibmodal has an open method that will return a modal instance.


var modalInstance = $uibModal.open({

                     templateUrl: 'view/sample.html',

                     controller: 'testController',// a controller for modal instance

                     controllerUrl: 'controller/test-controller', // can specify controller url path

                     controllerAs: 'ctrl', //  controller as syntax

                     windowClass: 'clsPopup', //  can specify the CSS class

                     keyboard: false, // ESC key close enable/disable

                     resolve: {

                         actualData: function () {

                             return self.sampleData;

                         }

                     } // data passed to the controller

                 }).result.then(function (data) {

                     //do logic

                 }, function () {

                     // action on popup dismissal.

                 });


We can create a bootstrap modal box angularjs service. Like other angular services use our app we can use the modal window. modalConfirmService is injected in the controller in which we need the modal box. Then call showModal() method option and configuration parameters as you need for the modal box. Then include dependencies libraries like bootstrap css, angularjs and bootstrap UI files. Include modalConfirmServices.js and app.js file into the header of your main file.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>

 <script src="app.js"></script>

<script src="app/shared/confirmBox/modalConfirmService.js" type="text/javascript"></script>


Create index.html and add an HTML button to show the modal box when the user clicks this button. 


<body ng-app="TestApp" ng-controller="testController">

<div class="container">

<h1>Simple Modal Box</h1>

<div class="well"><button class="btn btn-default" type="button" ng-click="showModal()">Click to open modal</button></div>

<div class="alert alert-success hide" ng-class="msg == '' ? 'hide': 'show'">{{msg}}</div>

</div>

</body>


Here we use a message div that will show a message on the click of yes button.


angular.module('TestApp.controllers', []).controller('testController',  ['$scope', 'modalConfirmService', function($scope, modalConfirmService) {

$scope.msg = '';

$scope.showModal = function(){


         var options = {

               closeButtonText: 'Cancel',

               actionButtonText: 'Yes',

               headerText: 'Modal Header ?',

               bodyText: 'Are you sure you want to delete?'

            };


         modalConfirmService.showModal({}, options).then(function (result) {

$scope.msg = 'You have clicked Yes';

         });

}

}]);



In this example, inject modalConfirmService in the testController controller and use this service method showModal() with optional parameters.