AngularJS: Get directive content before compiling

Question

I want to get the html content of a directive before it gets compiled.

Here is an example:

<my-directive>
  <ul>
    <li ng-repeat="item in items">{{item.label}}</li>
  </ul>
</my-directive>

I want to get all the content of my-directive and remove it from it and use it in other place (Not inside the directive it self)

So in other words I want to get access to the directive DOM, do some changes, and then compile it.

Answer 1

If you want to grab directive content before it gets compiled by Angular, then you need to use compile function of the directive:

app.directive('myDirective', function() {
    return {
        compile: function(tElement) {

            var html = tElement.html();
            console.log(html);

            // return link function if needed
            return function(scope, element) {
                console.log('link function');
            }
        }
    };
});

Demo: http://plnkr.co/edit/E5uuZY74iYc3g9s6sZkc?p=preview