Jak mogę dynamicznie dodać dyrektywę w AngularJS?

Mam bardzo spreparowaną wersję tego, co robię, co powoduje problem.

Mam prostydirective. Za każdym razem, gdy klikniesz element, dodaje kolejny. Jednak najpierw musi zostać skompilowany, aby poprawnie go renderować.

Moje badania doprowadziły mnie do$compile. Ale wszystkie przykłady wykorzystują skomplikowaną strukturę, której tak naprawdę nie wiem, jak się tutaj zgłosić.

Skrzypce są tutaj:http://jsfiddle.net/paulocoelho/fBjbP/1/

A JS jest tutaj:

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>");
            });
        }
    };
});

Rozwiązanie Josh David Miller:http://jsfiddle.net/paulocoelho/fBjbP/2/

questionAnswers(7)

yourAnswerToTheQuestion