Dynamically add directives in AngularJs

Dynamically add directives in AngularJs

Hi, I am going to share the code sample for dynamically add directives using AngularJs. i.e. 

We can say, we want to add a div that adds more divs or any other elements that do something when you click any buttons etc. 

Table of Context : Click for live demo 

1. HTML code sample 
2. CSS code sample
3. AngularJs directives code sample

1
2
3
4
5
6
7
8
//HTML code sample
<div ng-app="dAddApp">
  <section ng-controller="dAddCtrl">
    <display-Button-For-Add-Div></display-Button-For-Add-Div>
    <div id="displayDivs"></div>
  </section>
</div>
//HTML code sample

<div ng-app="dAddApp">
  <section ng-controller="dAddCtrl">
    <display-Button-For-Add-Div></display-Button-For-Add-Div>
    <div id="displayDivs"></div>
  </section>
</div>
01
02
03
04
05
06
07
08
09
10
11
12
13
//css code sample
.borderCss{
     border-style: solid;
    border-color: #ff0000 #0000ff;
     padding:0.3em;
    margin: 0.3em;
}
.btn{
     border-style: solid;
    border-color: green;
}
//css code sample

.borderCss{
     border-style: solid;
    border-color: #ff0000 #0000ff;
     padding:0.3em;
    margin: 0.3em;
}

.btn{
     border-style: solid;
    border-color: green;
}
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//AngularJs directives code sample: This is the main part.
var app = angular.module('dAddApp', []);
     //This is controller, where initialize the count default values.
    app.controller('dAddCtrl', function($scope) {
      $scope.count = 0;
    });
     //This directive that returns an element which adds DIV on displayButtonForAddDiv click.
    app.directive("displayButtonForAddDiv", function() {
      return {
        restrict: "E",
        template: "<div class='btn'><button adding>Click to add dynamically div</button> </div>"
      }
    });
     //This directive for adding DIV on adding button click .
    app.directive("adding", function($compile) {
      return function(scope, element, attrs) {
        element.bind("click", function() {
          scope.count++;
          angular.element(document.getElementById('displayDivs')).append($compile("<div class='borderCss' data-alert=" + scope.count + ">Show Div --> " + scope.count + "</div>")(scope));
        });
      };
    });
//AngularJs directives code sample: This is the main part.

var app = angular.module('dAddApp', []);

     //This is controller, where initialize the count default values.
    app.controller('dAddCtrl', function($scope) {
      $scope.count = 0;
    });

     //This directive that returns an element which adds DIV on displayButtonForAddDiv click.
    app.directive("displayButtonForAddDiv", function() {
      return {
        restrict: "E",
        template: "<div class='btn'><button adding>Click to add dynamically div</button> </div>"
      }
    });

     //This directive for adding DIV on adding button click .
    app.directive("adding", function($compile) {
      return function(scope, element, attrs) {
        element.bind("click", function() {
          scope.count++;
          angular.element(document.getElementById('displayDivs')).append($compile("<div class='borderCss' data-alert=" + scope.count + ">Show Div --> " + scope.count + "</div>")(scope));
        });
      };
    });
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book