Angularjs rendering directive with transclude on body

Question

I want to create a tooltip attribute directive with transclude, and render it on the body..

for example:

<div tooltip>
    <transcluded-content>content</transcluded-content>
</div>

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            }
        };
    });

I want to render the template on the body instead of the div...

Answer 1

In order to have the element on the body, you could try moving it in the link function. How about this?

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            },
            link: function (scope, element) {
                angular.element('body').append(element);
            }
        };
    });

There are more complex approaches, but they'll require $compile-ing and other messy techniques.