With AngularJS, how to trigger code to be executed after the view and controller have synced a particular change?

Question

specifically, I'm AJAXing in some date ranges into a pair of SELECTs (maintained with an AngularJS 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 AngularJS 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.

Andrew Joslin · Accepted Answer · 2012-07-31 02:56:57Z

1

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:

<select jq-slider="myList" ng-options="item.val for item in myList"></select>

Example JS:

myApp.directive('jqSlider', function() {
  return {
    link: function(scope, elm, attrs) {
      scope.$watch(attrs.jqSlider, function whenMyListChanges(newValue, oldValue) {
        $(elm).applySelectUISliderUpdateForNewValues();
      });
    }
  };
});

answered Jul 31, 2012 at 2:56

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

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

1 Comment

Ben Over a year ago

ah, very promising! thank you! the only thing I'm not sure about: selectToUISlider is built on two SELECTs. one represents the starting value for the range, the other represents the ending value. is it safe to assume that AngularJS updates HTML elements in the order they appear on the page? can I tie the directive to the second SELECT and know that the first has also been updated?

Collectives™ on Stack Overflow

With AngularJS, how to trigger code to be executed after the view and controller have synced a particular change?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related