Dealing with modal directives in angularjs

MOdal components are extremely common in web applications or even on small websites.

In the upcoming sections, we will show a simple modal solution loading content from a simple controller using the Bootstrap UI, and also an alternative way to extend it using a custom external template demonstrating the flexibility of custom directives with the Bootstrap UI.

Getting ready

As a starting point, we will use the generator-angm; the baseline code will be the default home directory.

At this point, we assume that you have the generator installed on your development environment and a project already started.

How to do it…

  1. Place the following highlighted code in the homeCtrl.js file in the home directory:
    /**
     * @ngdoc function
     * @name app.controller:HomeCtrl
     * @description
     * # HomeCtrl
     * Controller of the app
     */
    angular.module('bootstrap-ui-directives')
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$modal', function ($scope, $modal) {
      $scope.title = "Hello, Angm-Generator!";
    
      $scope.open = function () {
    
        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalCtrl'
        });
    
      };
    
    }])

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares