ngTeleport
All in all, ngTeleport
has similar functionality to ngTransclude
, but ngTeleport
allows you to uproot a piece of the DOM and place it elsewhere. However, ngTeleport
is entirely Angular.js aware and therefore sets up the scope and interpolation for you.
Getting Started
First of all you need to define the ng-teleport
attribute with a unique identifier for the scope on any DOM element you wish to teleport – this allows ngTeleport
to take a note of the precompiled HTML. Once you've defined the ng-teleport
you're free to move it around wherever you wish. Simply add teleport
to your directive, and invoke it with the source
(DOM node with the ng-teleport
attribute), target
, and any additional options.
With the above code section
is now all ready to be teleported anywhere in the DOM where there is a valid Angular scope.
;
Options
Option | Type | Default | Result |
---|---|---|---|
duplicate |
Boolean |
false |
Instead of removing the source DOM it instead creates a copy of it. |
retainScope |
Boolean |
false |
Retain the original scope of the node even though it's a child of another scope – not recommended due to complexity). |
insertion |
String |
append |
Can either be append or prepend depending on what you're looking for. |