Monday, May 14, 2018

Open a modal in AngularJS using $uibModal Service

Posted by fullstacktips on May 14, 2018 AngularJS 5 comments

You will often have to launch popup modals on your SPA when certain events are fired . For example when click a button or when you double-click a grid row or when you hit enter using your keyboard on a ui-grid row .For all these scenarios ,$uibModal service can be used to create popup windows in your Angular SPA.

To achieve this you need to include the bootstrap module as a dependency and add it to your application as shown below

angular.module('app',[ 'ui.bootstrap'])

Once the dependencies are injected , since the modal needs its own html template and controller , go ahead and create a template file(html) and controller for the modal .All the functions associated with the modal need to be defined inside this controller . Inject the $uibModal service into the main controller so that you can call its open() method which launches our popup.

controller('mainController', function mainController( $scope,$uibModal )

...

$scope.openModal = function(){

$uibModal.open({

templateUrl : 'modalTemplate.html',

controller : 'modalController'

});

....

This open method returns a modal instance ,with properties which can be referenced to perform other actions like close on the modal . Please refer the documentation in doc for more details on $uibModal and its methods.

The controller for the modal instance has a special $uibModalInstance injectable to access the modal instance and perform actions like close. In our example I have implemented the cancel button and ok button to close the modal when clicked.

...

controller('modalController', function modalController( $scope , $uibModalInstance )

$scope.cancel = function(){

$uibModalInstance.close()

}

......

Here is the demo:

https://plnkr.co/edit/j5aEfq8FvJj6k2PxS4In?p=preview

You can also create your own service to launch the modal and make it reusable i.e call the service from any of your angular pages and you can launch the modal window . Below is an example for launching a modal using a service .

https://plnkr.co/edit/ea5we4g7UcOxXvo0tGCV?p=preview