Where and how to modify transcluded content?

Question

I want to buid a directive (let's call it "A") that accepts HTML for transcluded content and modify its transcluded content by adding ng-click handlers on it using a custom logic.

I thought that the pre-link would be a good place to do this, but apparently I was very wrong (it seems that the docs suggest against it).

Every "A" directive will accept its own (unique) content, so I cannot do this in the compile phase.

In the link function I am not sure what I can do...

So, has anyone done anything similar?

EDIT:

I forgot to mention this: The handlers for ngClick should be defined on the directive's scope, not the parent scope. I don't know if Angular allows this, but that's what I need.

Answer 1

In your template you should add ng-transclude on the element want to add your custom html to.

your use of the directive:

    <attribute ng-click="clickMe()">
        <div>
            transcluded data
        </div>
    </attribute >

and in your template:

<span ng-transclude>
</span>

Hope it makes sense :)