python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions