How to add angular directive dynamically using jquery

Question

I am new for Angular JS. I have following angular directive

angular.module('components', []). directive('newissueedtr', function () { return { restrict: 'E', transclude: true, scope: {}, template: '<div><textarea></textarea></div>', replace: true };

I want to add this directive dynamically from jquery, like,

$('body').append('<newissueedtr></newissueedtr>')

Above jquery code is not working. Is it possible? Or is there any other way.

Answer 1

Here is an example which does the same u need to modify as per your needs.. http://jsfiddle.net/paulocoelho/fBjbP/2/

var module = angular.module('testApp', [])
    .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);
            };
        }
    };
});

function crtl($scope) {}