Question

我正在编写一个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>

Answer 1

我在我的应用中遇到了类似的问题并按如下方式解决：对于您尝试更改的范围中的每个变量，您更改它的方式应该包含在$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');
   });
 };

Angular.js计时器完成 - 回调方法没有数据绑定？

1 个答案: