How to dynamically add a custom directive to a div element?

Question

I'm new to angularjs, please calm down. Therefore, I have this directive and you want to dynamically attach it to the div element. How can I do it?

appDirectives.directive('test', function () { return { restrict: 'E', templateUrl: 'templates/test.html' } }); 

I tried this, but it did not work. I assume that the template did not compile before I joined the div element. Is there an angular way to do this?

 <div id="element"></div> $('#element').append(<test></test>); 

Update: Here is what I am trying to do. When a user logged into my page, I have 3 different templates that I would like them to display depending on the type of user. 3 templates: <basic>, <regular>, <advance> Basically, after the user logged in, I got the value of the user.type variable and would like to show the corresponding template for this user.

Any suggestions would help. Thanks:)

Answer 1

Something like this, maybe? http://plnkr.co/edit/SmL9fA5GzAxI2WYTnYZy

Angular way presents a representation of javascript object (in scope) and

Answer 2

ng-switch , probably you want:

 <div id="element" ng-switch on="user.type"> <span ng-switch-when="basic"><basic></basic></span> <span ng-switch-when="regular"><regular></regular></span> <span ng-switch-when="advance"><advance></advance></span> </div> 

Plunker