CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-ng-transclude
Sn0opr
Sn0opr

Reputation: 1026

AngularJS: Get directive content before compiling

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.

Upvotes: 1

Views: 630

Answers (1)

dfsq
dfsq

Reputation: 193261

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

Upvotes: 4

Related Questions