with Angular JS, how can I trigger code to be executed after the view and controller have synced a particular change?

By : Ben
Source: Stackoverflow.com
Question!

specifically, I'm AJAXing in some date ranges into a pair of SELECTs (maintained with an Angular ng-repeat), which I'm then turning into a slider using jQuery UI's selectToUISlider. I assume selectToUISlider's behavior is undefined if the SELECTs it's operating on are modified while it's running. is there a way to ensure that it is called only after Angular JS has finished updating? I haven't encountered any problems yet, but I'm not sure I'm just lucky, or haven't had my computer lag at just the right moment, etc...

I can think of two solutions, but neither seems very good:

  • don't use the ng-repeater; build the SELECTs with jQuery. but that'd be sad to have to do.
  • delay the call to selectToUISlider using setTimeout. but that seems... inelegant.
By : Ben


Answers

I don't know how selectToUISlider works, but you want a directive. In that directive, $watch for changes to the list and update the slider however it's supposed to be done.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch

Example HTML:



This video can help you solving your question :)
By: admin