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&#39;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(&#39;testApp&#39;, [])
        .directive(&#39;test&#39;, function () {
        return {
            restrict: &#39;E&#39;,
            template: &#39;&lt;p&gt;{{text}}&lt;/p&gt;&#39;,
            scope: {
                text: &#39;@text&#39;
            },
            link:function(scope,element){
                $( element ).click(function(){
                    // TODO: This does not do what it&#39;s supposed to :(
                    $(this).parent().append(&quot;&lt;test text=&#39;n&#39;&gt;&lt;/test&gt;&quot;);
                });
            }
        };
    });

Solution by Josh David Miller: 
http://jsfiddle.net/paulocoelho/fBjbP/2/


All Dynamically Generated Solutions on Gang of Coders

Total of 1 Dynamically Generated Solutions

How can I dynamically add a directive in AngularJS?