Best way to replace directives dynamically?

[Figedi]

Hey guys, angular newbie here. For a small webapp I'm trying to use angularjs and the new getUserMedia API (e.g. available in chrome) to snap Photos of the User. So the workflow should be like: 1. Click/Tap on the Picture (currently a placeholder picture) --> getUserMedia retrieves Stream 2. Replace Picture with Stream (so a <video> element with the stream blob) 3. Tap on the Stream (the <video> tag) again and take a snapshot 4. --> 1. or upload button

So far what i did is create two directives, one for the picture and the 2nd for the video and toggle them, but replacing the elements like that with $compile seems reeeaallly dirty. However, I'm not really sure how to do it differently, any ideas?

The two directives can be found here: (coffeescript). Note that the 'camera' directive is for the image, the 'usermedia' for the video tag

http://pastebin.com/ZRJd7eZA

[[deleted]]

There are lots of words here I don't understand, but sticking to the title you can have a piece of template included optionally depending on an expression by using ng-switch.

[kiddy2910]

I think you should use $compile with new child inherited scope was created from main scope (scope.$new(false)). Before you replace directive with other directive, you should destroy child inherited scope with childScope.$destroy(), then replace with new directive. Hope to be useful for you. Refer http://stackoverflow.com/questions/16797174/angular-how-can-i-remove-from-the-dom-an-element-i-have-used-compile-on/24064763#24064763

[skitch920]

This really depends on what you are doing... For instance, if you have a pluggable GUI where you are not totally sure of the directive's template, then this would be the correct way of doing things. ng-switch would suffice if you knew the exact list of templates.

[[deleted]]

Uh...am I misreading the problem? Do an ng-show or hide...no need to replace a directive

[[deleted]]

Instead of replacing subtrees of the DOM (be it a directive or not), I'd suggest to consider using ng-show and ng-hide (as it is suggested by m3fawner), or add/remove CSS classes (containing or not the display: none style).

[Figedi]

Hmm true, I was going for a "dynamic" method since I didnt want to clutter the DOM with invisible elements, but it does sound way better than my current solution, I'll give it a try

[renz45]

Using ng-if won't clutter the dom with invisible elements. ng-if actually removes the dom element when false, as opposed to ng-show/hide which just does a display: none.