AngularJS How to add / remove directive dynamically in page when button click

Question

suppose i have two button and when we click on button 1 then show function call in controller and same way when we click on button 2 then hide function call in controller.

from show function how could i dynamically load and add directive in page and as well as how could i hide or remove directive from page when hide function will be called.

hence i am new in angular so not sure the below code will add directive at run time if i call it from show function ?

$('body').append($compile("<my-angular-directive />")(scope));
scope.$apply();

i do not know how to remove directive from page if it exist in page from controller function. give me suggestion how to achieve this. thanks

byteC0de · Accepted Answer · 2016-05-13 12:14:18Z

4

you can use directive as class and you can load it with ng-class directive

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.showMyDir = true;
  $scope.buttonClcik = function(){
    $scope.showMyDir = !$scope.showMyDir;
  };
  
});

jimApp.directive("customDir1", function() {
  return {
    restrict:"AEC",
    scope:{
      value:"="
    },
    link: function(scope, element, attrs) {
    }
  }
});

jimApp.directive("customDir2", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <button ng-click="buttonClcik();">Click</button>
  
  <div  ng-class="{'custom-dir1': showMyDir, 'custom-dir2': !showMyDir}" value="showMyDir">Hai</div>
</div>

edited May 13, 2016 at 12:14

answered May 13, 2016 at 11:42

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Monojit Sarkar Over a year ago

i just want to load and inject directive on button click.

Monojit Sarkar Over a year ago

if possible show me how can we use ng-class to load directive. i use ng-class to work with css class.

byteC0de Over a year ago

@MonojitSarkar don't use ng-if, ng-if is work like an $watch it will affect on your app performance

Monojit Sarkar Over a year ago

how could i add directive to page dynamically on button click and append function......is it possible?

thepio · Accepted Answer · 2016-05-13 11:59:43Z

3

Use ng-if. So basically if you have a scope variable let's say $scope.showElement you can then use it like this:

In your controller:

$scope.showElement = true;

HTML:

<this-directive ng-if="showElement"></this-directive>

Originally the directive will show up but when you change the value of $scope.showElement it will be removed.

EDIT based on your comment:

Set your $scope.showElement to false and on ng-click set it to true like this:

angular.module('myApp', [])

.controller('testController', function($scope) {
  
  $scope.showElement = false;

  $scope.toggleElement = function() {
    console.log('toggle element');
    $scope.showElement = $scope.showElement ? false : true;
  };
  
});

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body ng-controller="testController">
     <button type="button" ng-click="toggleElement()">Show directive</button>
     <div ng-if="showElement" style="width:100%;height:40px;background-color:red;">This element will be shown/removed</div>
  </body>
</html>

EDIT 2:

You can also use css declarations for better performance if you don't mind that the element still stays on the page but is hidden. With css it would go like this:

angular.module('myApp', [])

.controller('testController', function($scope) {
  
  $scope.showElement = false;

  $scope.toggleElement = function() {
    console.log('toggle element');
    $scope.showElement = $scope.showElement ? false : true;
  };
  
});

.hidden {
  display: none;
}

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body ng-controller="testController">
     <button type="button" ng-click="toggleElement()">Show directive</button>
     <div ng-class="{'hidden' : showElement === false}" style="width:100%;height:40px;background-color:red;">This element will be shown/removed</div>
  </body>
</html>

edited May 13, 2016 at 11:59

answered May 13, 2016 at 11:43

thepio

6,2635 gold badges38 silver badges55 bronze badges

2 Comments

Monojit Sarkar Over a year ago

how could i add directive to page dynamically on button click and append function......is it possible?

thepio Over a year ago

I would not recommend that and I think you need to do a lot to make it work. Ng-if is for situations like that, why would you need to specifically need to append it to the DOM?

M. Junaid Salaat · Accepted Answer · 2016-05-13 11:44:41Z

1

You could easily use ng-if directive on the wrapper of your custom directive

<div ng-if="showMyDir()">
  <my-angular-directive />
</div>

<div ng-if="showMyDirTwo()">
  <my-angular-directive-two />
</div>

answered May 13, 2016 at 11:44

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

1 Comment

Monojit Sarkar Over a year ago

how could i add directive to page dynamically on button click and append function......is it possible?

Collectives™ on Stack Overflow

AngularJS How to add / remove directive dynamically in page when button click

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related