AngularJS not updating, directive in directive

Question

I have this quiz AngularJS app where I have 2 types of questions:

Simple - where you need to choose 1 or 2 choices to answer the question and go to the next question.
Range Slider - where you need to drag a range slider, when the user is stop dragging, I'm validating the answers and go to the next question.

I'm displaying the current question using ng-if (current $index = $scope.currentQuestion and I'm incremeting by one everytime a question in answered).

On the simple question everything works as exepted but on the Range Slider questions after the user is stoping dragging, there is a 1-2s delay before its displaying the next question.

I need to click again somewhere on the page to see the next question.

Can someone explain me why its not updating instant like the simple question and why this delay occurs?

.controller('MainCtrl', function($scope) {

  $scope.currentQuestion = 0;

  $scope.isCurrentQuestion = function(index) {
    return $scope.currentQuestion === index
  };

  $scope.$on('question:answered', function(event, data) {
    $scope.currentQuestion = data.current;
  });

  $scope.questions = [{
    'title': 'test #1',
    'type': 1,
    'choices': ['Choice #1', 'Choice #2', 'Choice #3', 'Choice #4'],
    // othe stuff
  }, {
    'title': 'test #2',
    'type': 2
      // othe stuff
  }, {
    'title': 'test #3',
    'type': 2
      // othe stuff
  }];

})

http://plnkr.co/edit/EiymOBRcpxoDQQlnHjqV?p=preview

Btw. I'm using https://github.com/angular-ui/ui-slider this directive for the range slider.

Nikos Paraskevopoulos · Accepted Answer · 2015-09-14 09:22:43Z

1

These kinds of bugs are usually caused by not calling $scope.$apply() at the appropriate time. It seems the stop() callback is not calling $apply, changing your code to:

    function stop(event, ui) {
      scope.$apply(function() {
        scope.value = ui.value;
        validate(scope.value);
      });
    }

... seems to correct this behaviour: Forked plunk

answered Sep 14, 2015 at 9:22

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

AngularJS not updating, directive in directive

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