js .append() Angular Directive not compiling

Question

Simplified I have the following problem, I want to append to a div using the jquery function .append(), an Angular directive and it won't work. I've created a jsfiddle to make my point. http://jsfiddle.net/H26eg/2/

Do you have any idea why isn`t it working and what should i do?

I think it is related to this http://docs.angularjs.org/api/ng.$compile but can`t figure it out..

Thanks a lot !

EDIT: I've managed to do the above using two directive, calling one directive from the other like this: http://jsfiddle.net/H26eg/6/ . The problem is if instead of regular template:"html_text" in anpr directive I use templateUrl: "path_to_html_file" again it won't compile the directive. Can somebody please tell me how to compile the templateUrl directive ?

possible duplicate of [Dynamically loaded input box does nothining](http://stackoverflow.com/questions/15438092/dynamically-loaded-input-box-does-nothining) — Stewie, Jul 03 '13 at 08:38
In the above link it says `define a directive and use a template, which will automatically get compiled for you by Angular.` This is exactly what I`ve done but why isn`t Angular compiling my directive when I`m adding it to my div using the .append() function ? — Ionut Ursan, Jul 03 '13 at 08:48
There's simply to many wrong things with your code. You might want to take a chance with some [tutorials](http://docs-angularjs-org-dev.appspot.com/tutorial) and [screencasts](http://www.egghead.io/) before trying to write your own directives. — Stewie, Jul 03 '13 at 09:07
Thanks for the above tutorials, it helped me a lot .. but still didn`t managed to make it work properly. The problem i`m facing now is that angular won`t compile the templateUrl i`m loading from my directive. If i use only template:"html_text" it works but if i change it to templateUrl it won`t load. Can you please give me a tip or an ideea ? http://jsfiddle.net/H26eg/6/ — Ionut Ursan, Jul 03 '13 at 14:21

score 1 · Accepted Answer · answered Jul 04 '13 at 08:31

Finaly done it using a controller function:

<div data-ng-controller="SetupController">

    <input data-ng-click="addAnpr('tabs_1','anpr')" type="button" value="Add"/>

    <div id="tabs_1">

    </div>

</div>

..

app.controller('SetupController', function ($scope, $compile) {
$scope.addAnpr = function (tab,drctv) {
    var el = $compile('<'+drctv+'/>')($scope);
    $('#'+tab).append(el);
}
});

app.directive('anpr', function () {
    return{
        restrict: 'E',
        templateUrl: 'app/partials/SETUP/anprTab.html'
    }
});

js .append() Angular Directive not compiling

1 Answers1