/ / Dynamically add directives in AngularJs
Dynamically add directives in AngularJs

Dynamically add directives in AngularJs

Edit
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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^