角度.js计时器完成回调方法不绑定数据

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

本文关键字：方法 绑定 数据 回调 js 计时器 角度      更新时间：2023-09-26

我正在编写一个Angular.js应用程序，这是一个显示图片并要求用户按下正确答案的测验。然后，应用存储对象的答案。

除了时间回调函数不绑定值之外，所有这些都可以正常工作。

单击"是"时，它还将更新我的img: {{questions[questionId]['imgUrl']}}，该在以下函数中更新：

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

由于某种原因，回调函数timeout()应该执行相同的任务，但它不起作用。我在控制台日志中获得了正确的值，但img: {{questions[questionId]['imgUrl']}}未更新/

我应该以某种方式在这里进行额外的绑定吗？

<!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>

我在应用程序中遇到了类似的问题，并按如下方式解决了它： 对于您尝试更改的范围中的每个变量，更改它的方式应包含在 $scope.$apply() 中。

所以，而不是：

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

。尝试用$scope.$apply()包装内容：

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