CODEWITHSUNDEEP
angularjscoffeescriptangularjs-directivestring-interpolation
Arnaud Leymet
Arnaud Leymet

Reputation: 6132

AngularJS directive and string interpolation

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

Upvotes: 0

Views: 1421

Answers (1)

basarat
basarat

Reputation: 275997

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

Upvotes: 4

Related Questions