Angular.js timer finish-callback method does not data bind?

Question

I am coding an Angular.js app that is kind of a quiz that shows picture and asks user to press a button for correct answer. The app then stores answers to an object.

All this works fine except that time callback function does not bind value.

When yes is clicked also it will update my img: {{questions[questionId]['imgUrl']}} which is updated inside the following function:

$scope.yes = function() {
    //instantiate timer
    //save data
    $scope.questions[$scope.questionId]['userAnswer'] = 'a';
    //move to next question
    $scope.questionId++;
    startTimer('progressbar-timer');

};

For some reason callback function timeout() should perform the same task, but it does not work. I get the correct value in my console log but img: {{questions[questionId]['imgUrl']}} is not be updated/

Should I somehow do extra binding here?

<!DOCTYPE html>
<html lang="en-US">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<!-- compiled CSS -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css" />


<!-- compiled JavaScript -->
<script type="text/javascript" src="dist/assets/js/angular-timer-bower.js"></script>
<script type="text/javascript" src="dist/assets/js/angular-timer-all.min.js"></script>

<body>

<div ng-app="ajokoeApp" ng-controller="testCtrl">


  <br>
  question: {{questions[questionId]['question']}}
  img: {{questions[questionId]['imgUrl']}}


  <button class="btn" ng-click="yes()">Yes</button>
  <button class="btn" ng-click="no()">No</button>
  <button class="btn" ng-click="notSure()">Not Sure</button>
<section id="progressbar-timer">
  <timer id="countdown" interval="1000" countdown="5" finish-callback="timeout()">
      Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}} {{kysymys}}
      <div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
          <div class="bar" style="min-width: 2em; height: 30px; width: {{progressBar}}%;">
              {{countdown}}
          </div>
      </div>
  </timer>
</section>

<h3 class="counter">
    <timer countdown="5" interval="1000" finish-callback="timeout.finished()">{{seconds}} second{{secondsS}} </timer>
</h3>
Timer: <span class="timer-status">{{timeout.status}}</span>




</div>

  <script>
  angular.module('ajokoeApp', ['timer']).controller('testCtrl', function($scope) {
      $scope.questions = [
          {id: 0, question:'Can i drive straight?',answer:'a',userAnswer:'',imgUrl:'1.jpg'},
          {id: 1, question:'May i turn left?',answer:'b',userAnswer:'',imgUrl:'2.jpg'},
          {id: 2, question:'MAy i turn right?',answer:'a',userAnswer:'', imgUrl:'3.jpg'}
          ];
      //functions
      $scope.questionId = 0;
      $scope.yes = function() {
        //instantiate timer
        //save data
        $scope.questions[$scope.questionId]['userAnswer'] = 'a';
        //move to next question
        $scope.questionId++;
        startTimer('progressbar-timer');

      };
      $scope.no = function() {
        $scope.questions[$scope.questionId]['userAnswer'] = 'b';
        $scope.questionId++;
        startTimer('progressbar-timer');

      };
      $scope.notSure = function() {
        $scope.questions[$scope.questionId]['userAnswer'] = 'c';
        $scope.questionId++;
        startTimer('progressbar-timer');

      };
      $scope.timeout = function() {
        startTimer('progressbar-timer');
        $scope.questions[$scope.questionId]['userAnswer'] = 'c';
        $scope.questionId++;
        startTimer('progressbar-timer');
      };

    //Debug
    console.log($scope.questions);
  });
  </script>

</body>
</html>

siddii.github.io/angular-timer/index.html Please see example here, im using the "Progressbar Timer" — silakanbrotha
– silakanbrotha, Commented Nov 11, 2015 at 10:46
Im thinking this problem is a scope. For some reason timer is not able to see outer layers of DOM? — silakanbrotha
– silakanbrotha, Commented Nov 11, 2015 at 11:29

Jamie Birch · Accepted Answer · 2016-07-20 19:26:49Z

I had a similar problem in my app and solved it as follows: For each variable in scope that you are trying to change, the way by which you change it should be wrapped in $scope.$apply().

So, rather than:

 $scope.no = function() {
   $scope.questions[$scope.questionId]['userAnswer'] = 'b';
   $scope.questionId++;
   startTimer('progressbar-timer');
 };

... try wrapping the contents with $scope.$apply():

 $scope.no = function() {
   $scope.apply(function() {
      $scope.questions[$scope.questionId]['userAnswer'] = 'b';
      $scope.questionId++;
      startTimer('progressbar-timer');
   });
 };

Collectives™ on Stack Overflow

Angular.js timer finish-callback method does not data bind?

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related