How can I dynamically add a directive in AngularJS?

Question

I have a very boiled down version of what I am doing that gets the problem across.

I have a simple directive. Whenever you click an element, it adds another one. However, it needs to be compiled first in order to render it correctly.

My research led me to $compile. But all the examples use a complicated structure that I don't really know how to apply here.

Fiddles are here: http://jsfiddle.net/paulocoelho/fBjbP/1/

And the JS is here:

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

Solution by Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Konyn

Answer 1

You have a lot of pointless jQuery in there, but the $compile service is actually super simple in this case:

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

You'll notice I refactored your directive too in order to follow some best practices. Let me know if you have questions about any of those.

Vaucluse

Awesome. It works. See, these simple and basic examples are the ones that should be shown in angulars' docs. They start off with complicated examples. – Konyn

$compile often isn't used for cases this simple as there are usually easier ways to accomplish this than reaching for $compile. – Vaucluse

Thanks, Josh, this was really useful. I made a tool in Plnkr that we are using in a new CoderDojo to help kids learn how to code, and I just extended it so that I can now use Angular Bootstrap directives like datepicker, alert, tabs, etc. Apparently I msssed something up and right now it's only working in Chrome though: embed.plnkr.co/WI16H7Rsa5adejXSmyNj/preview – Fossette

Josh - what's an easier way to accomplish this without using $compile? Thanks for your answer by the way! – Backdrop

@Backdrop In this case, it would be far easier to just use ngRepeat. :-) But I assume you mean adding new directives dynamically to the page, in which case the answer is no - there's no simpler way because the $compile service is what wires directives up and hooks them into the event cycle. There's no way around $compileing in a situation like this, but in most cases another directive like ngRepeat can accomplish the same job (so ngRepeat is doing the compiling for us). Do you have a specific use case? – Vaucluse

Thanks Josh! I'm really just trying to get a handle on the best practices so to speak. For a current project we have a variable set of form controls that are dependent upon user permissions. Instead of loading them all on page load we wanted them to be selectable (e.g., search by name would add a custom input directive to the form) so $compile seemed like a good option. I thought about using the ng-show directive but it seems that loading all the possible control directives might be a waste. Thanks again! – Backdrop

Hi, would you please provide ideas on my new proposed API to make programmatically adding directives a simpler process? github.com/angular/angular.js/issues/6950 Thanks! – Satisfaction

Shouldn't the compile happen in the prelink stage? I think that the controller should only contain non-DOM, unit-testable code, but I'm new to the link/controller concept so I'm unsure myself. Also, one basic alternative is ng-include + partial + ng-controller since it will act as a directive with inherited scope. – Grommet

Could you elaborate why you change link function to a controller in this case? – Pirtle

How would this solution change if you needed to add a DOM element without one being there already? As in, could you use just JavaScript to create every directive from scratch? – Huppert

@Huppert That's exactly what we did above; we created an element that had a directive, compiled it, and attached it to the DOM. If you mean arbitrarily adding DOM nodes anywhere in DOM tree like you do with jQuery, that would be very un-angular. Check out my other post: #14994891 – Vaucluse

Similar problem i am facing, Can you help me here #38822480 – Evictee

@JoshDavidMiller yes I do have a specific use case: #41004555. Should I go with ng-repeat? If so, I don't know how to dynamically append a canvas element to an element not yet created in ng-repeat that it is within – Numerator

Answer 2

In addition to perfect Riceball LEE's example of adding a new element-directive

newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)

Adding a new attribute-directive to existed element could be done using this way:

Let's say you wish to add on-the-fly my-directive to the span element.

template: '<div>Hello <span>World</span></div>'

link: ($scope, $element, $attrs) ->

  span = $element.find('span').clone()
  span.attr('my-directive', 'my-directive')
  span = $compile(span)($scope)
  $element.find('span').replaceWith span

Hope that helps.

Abigailabigale

Don't forget to remove the original directive in order to prevent Maximum call stack size exceeded error. – Porcia

Hi, would you please provide ideas on my new proposed API to make programmatically adding directives a simpler process? github.com/angular/angular.js/issues/6950 Thanks! – Satisfaction

I wish in 2015 we wouldn't have limits in call stack size. :( – Warmedover

The Maximum call stack size exceeded error always happens because of infinite recursion. I've never seen an instance where increasing the stack size would solve it. – Talishatalisman

Similar problem i am facing, Can you help me here #38822480 – Evictee

Answer 3

Dynamically adding directives on angularjs has two styles:

Add an angularjs directive into another directive

• inserting a new element(directive)
• inserting a new attribute(directive) to element

inserting a new element(directive)

it's simple. And u can use in "link" or "compile".

var newElement = $compile( "<div my-diretive='n'></div>" )( $scope );
$element.parent().append( newElement );

inserting a new attribute to element

It's hard, and make me headache within two days.

Using "$compile" will raise critical recursive error!! Maybe it should ignore the current directive when re-compiling element.

$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element);          // the same error too.
$element.replaceWith( newElement );

So, I have to find a way to call the directive "link" function. It's very hard to get the useful methods which are hidden deeply inside closures.

compile: (tElement, tAttrs, transclude) ->
   links = []
   myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
   links.push myDirectiveLink
   myAnotherDirectiveLink = ($scope, $element, attrs) ->
       #....
   links.push myAnotherDirectiveLink
   return (scope, elm, attrs, ctrl) ->
       for link in links
           link(scope, elm, attrs, ctrl)       

Now, It's work well.

Waddle

Would love to see a demo of inserting a new attribute to element, in vanilla JS if possible - I'm missing something... – Lykins

the real example of inserting a new attribute to element is here(see my github): github.com/snowyu/angular-reactable/blob/master/src/… – Waddle

Doesn't help honestly. This is how I ended up solving my problem though: https://mcmap.net/q/128622/-angularjs-directive-that-uses-the-original-element-type-in-template – Lykins

Yes, this case is the inserting an attribute directive into another directive, not the inserting element in template. – Waddle

What's the reasoning behind doing it outside of the template? – Lykins

Hi, would you please provide ideas on my new proposed API to make programmatically adding directives a simpler process? github.com/angular/angular.js/issues/6950 Thanks! – Satisfaction

This worked in angular 1.2, but stopped in angular 1.3. – Ophthalmia

Answer 4

function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}

Latashalatashia

Answer 5

Josh David Miller is correct.

PCoelho, In case you're wondering what $compile does behind the scenes and how HTML output is generated from the directive, please take a look below

The $compile service compiles the fragment of HTML("< test text='n' >< / test >") that includes the directive("test" as an element) and produces a function. This function can then be executed with a scope to get the "HTML output from a directive".

var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);

More details with full code samples here: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Doehne

Answer 6

The accepted answer by Josh David Miller works great if you are trying to dynamically add a directive that uses an inline template. However if your directive takes advantage of templateUrl his answer will not work. Here is what worked for me:

.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {}, 
        templateUrl: "app/views/modal.html",
        link: function (scope, element, attrs) {
            scope.modalTitle = attrs.modaltitle;
            scope.modalContentDirective = attrs.modalcontentdirective;
        },
        controller: function ($scope, $element, $attrs) {
            if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
                var el = $compile($attrs.modalcontentdirective)($scope);
                $timeout(function () {
                    $scope.$digest();
                    $element.find('.modal-body').append(el);
                }, 0);
            }
        }
    }
}]);

Anhwei

Answer 7

Inspired from many of the previous answers I have came up with the following "stroman" directive that will replace itself with any other directives.

app.directive('stroman', function($compile) {
  return {
    link: function(scope, el, attrName) {
      var newElem = angular.element('<div></div>');
      // Copying all of the attributes
      for (let prop in attrName.$attr) {
        newElem.attr(prop, attrName[prop]);
      }
      el.replaceWith($compile(newElem)(scope)); // Replacing
    }
  };
});

Important: Register the directives that you want to use with restrict: 'C'. Like this:

app.directive('my-directive', function() {
  return {
    restrict: 'C',
    template: 'Hi there',
  };
});

You can use like this:

<stroman class="my-directive other-class" randomProperty="8"></stroman>

To get this:

<div class="my-directive other-class" randomProperty="8">Hi there</div>

Protip. If you don't want to use directives based on classes then you can change '<div></div>' to something what you like. E.g. have a fixed attribute that contains the name of the desired directive instead of class.

Corydon

Similar problem i am facing, Can you help me here #38822480 – Evictee

OMG. it took 2 days to find this $compile... thanks friends.. it works best... AJS you rock.... – Ricardoricca