AngularJS Dialog component

In this example below you will see how to do a AngularJS Dialog component with some HTML / CSS and Javascript

This awesome code was written by 01abhishekjain, you can see more from this user in the personal repository.
You can find the original code on
Copyright 01abhishekjain ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>AngularJS Dialog component</title>


  <div ng-app="app" ng-controller="ctrl">
  <button ng-click="show=!show">show/hide toggle</button>

  <dialog-x title="Hello {{username}}." visible="show" on-cancel="show = false" on-ok="show = false; doSomething()">
    Body goes here: {{username}} is {{title}}.
  <script src=''></script>


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



/*Downloaded from */
var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.username = "abhishek";
  $scope.title = "fighter";
  $ = false;
  $scope.doSomething = function() {

app.directive("dialogX", function() {
  return {
    restrict: "E",
    transclude: true,
    scope: {
      visible: "=",
      title: "@",
      onOk: "&",
      onCancel: "&"
    template: `<div ng-show="visible">
  <div class="body" ng-transclude></div>
  <div class="footer">
    <button ng-click="onOk()">Save changes</button>
    <button ng-click="onCancel()">Close</button>