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

You could use AngularJS $watch and setting a timeout function. Have a reference here docs.angularjs.org/api/ng.$rootScope.Scope — BKM
– BKM, Commented Aug 17, 2013 at 11:17

basarat · Accepted Answer · 2013-08-17 13:59:02Z

4

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

edited Aug 17, 2013 at 13:59

answered Aug 17, 2013 at 11:28

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS directive and string interpolation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related