1

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.

user2173353
  • 4,316
  • 4
  • 47
  • 79

1 Answers1

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 :)

Ngschumacher
  • 140
  • 1
  • 10
  • But what I want is to add the `ng-click` attributes on the transcluded template using JS code. Where do you do that? – user2173353 Sep 15 '14 at 13:16
  • check this out. http://plnkr.co/edit/ZD8xLh22dwlNAWjWk108?p=preview Otherwise you need to create an example of what you mean. – Ngschumacher Sep 15 '14 at 13:38
  • What I mean is to add the `ng-click="clickMe()"` with javascript code written in the directive, then compile it and have it working. I also want to use the directive scope for some `ngClick` operations. I think I have found the solution in those links: http://stackoverflow.com/a/18157958/2173353 http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ – user2173353 Sep 15 '14 at 13:44
  • 1
    i dont see why you want it written with javascript(when saying javascript i assume you write it in the controller and inject it). You can create a clickMe method on the directive Link function, and then just reference that in the template. Then it will use the directives scope. – Ngschumacher Sep 15 '14 at 13:47
  • You are right, but I wanted to save the users of the directive to fill in all those `ngClicks` by hand. – user2173353 Sep 15 '14 at 13:48
  • And also, I might need to mix the two scopes which will be somewhat more complex. Anyway, thanks. :) – user2173353 Sep 15 '14 at 13:50