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

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)