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 — Stewie
– Stewie, Commented Jul 3, 2013 at 8: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 Ive done but why isnt Angular compiling my directive when I`m adding it to my div using the .append() function ? — Ionut Ursan
– Ionut Ursan, Commented Jul 3, 2013 at 8:48
There's simply to many wrong things with your code. You might want to take a chance with some tutorials and screencasts before trying to write your own directives. — Stewie
– Stewie, Commented Jul 3, 2013 at 9:07
Thanks for the above tutorials, it helped me a lot .. but still didnt managed to make it work properly. The problem im facing now is that angular wont compile the templateUrl im 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 ? jsfiddle.net/H26eg/6 — Ionut Ursan
– Ionut Ursan, Commented Jul 3, 2013 at 14:21

Ionut Ursan · Accepted Answer · 2013-07-04 08:31:12Z

1

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

answered Jul 4, 2013 at 8:31

Ionut Ursan

1871 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

js .append() Angular Directive not compiling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related