AngularJS directive and string interpolation

Question

Context:

I'm applying a Lightbox effect on some DOM elements using an AngularJS directive named opensAsPopup.

Issue:

Some of these elements have dynamical content coming from a ng-repeat directive, and it seems that my opensAsPopup directive applies before the string interpolation.

Would that be possible to apply the lightbox effect after the string interpolation?

---

HTML:

<li>
  <a href="/path/to/{{entry.id}}" opens-as-popup>Link</a>
</li>

Script:

app.directive("opensAsPopup", [ ->
  restrict: "A"
  scope: {}
  replace: false
  transclude: false
  compile: (tElement, tAttrs) ->
    new lightbox(tElement.get(0))
])

Answer 1

You need to do it in the linking function. Scope is not applied till the link phase (which comes after the compile phase). Also do not create an isolated scope on the same element (removed scope: {}) as that would mean that you would need to set scope.entry.id within your link function. So:

app.directive("opensAsPopup", [ ->
  restrict: "A"
  replace: false
  transclude: false
  link: (scope,tElement, tAttrs) ->
    new lightbox(tElement.get(0))
])