Need to use $watch to apply conditional style?

[Phil Mitchell]

I display a set of lines from a play and have audio that reads the lines one after another. I use ngRepeat to display the lines and am trying to use ngClass to highlight the line that is currently being spoken, keeping it in sync with the controller via isCurrent() function:

   <div ng-repeat="line in lines" ng-class="{currentLine: isCurrent($index)}">

However, the style only gets applied when audio starts and stops because the ng-class expression does not get evaluated during playback. I suspect I need to use $watch but am unclear on where I would apply it.

A more complete fiddle is here: http://jsfiddle.net/sharp13/Pzmkv/1/

 

[Josh David Miller]

Hello!

What you're looking for is actually `$scope.$apply()`. When you run changes outside of AngularJS, they have to be tied back into the lifecycle through $apply. I can't say specifically where to put it without seeing the omitted code, but the basic idea is that whenever your external code increments the line number, you need to wrap it in a call to $apply.

Josh

 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Phil Mitchell]

Huge thanks, that's perfect! When you say "outside of AngularJS" ... that would include anything that gets updated inside a closure?

I'm an angular novice, so want to make sure I'm not just doing things the wrong way. :)

[Josh David Miller]

When I say "outside of AngularJS," I mean anything outside of its lifecycle. It's lifecycle is different from the browser's and different from jQuery's. If you have some external library you've created to play the audio that signals which line number it's on, you need to update the current line number you get from that service in a call to $apply(). As for closures specifically, that's true when it's outside of AngularJS. But closures are used frequently *inside* of AngularJS and they're usually handed automatically.

[Phil Mitchell]

Ah, finally got it ... the confusing part was that I define the closure inside AngularJS (in my controller). But I just realized that it gets passed as a callback to the external lib that's actually playing the audio, so executes outside the angular context. Seems like a pretty common situation ...

If you're curious, here's a fiddle showing the code: http://jsfiddle.net/sharp13/Pzmkv/4/

Thanks so much for clearing this up for me!