Question

我正在扩展我成功完成学习AngularJS的教程（可以在这里找到：https://github.com/felipedaraujo/saturn-quiz）。该应用程序是关于土星的测验。我试图将地球添加为单独的测验，以便用户可以根据每个星球选择一个测验。

我设置了成功显示测验的应用程序但是当我点击答案时它不再响应我在控制台上收到错误：

angular.js:11655 TypeError: Cannot read property 'questionState' of undefined at ChildScope.$scope.selectAnswer (controllers.js:24)

 at $parseFunctionCall (angular.js:12404)
 at callback (angular.js:21566)
 at ChildScope.$eval (angular.js:14466)
 at ChildScope.$apply (angular.js:14565)
 at HTMLParagraphElement.<anonymous> (angular.js:21571)
 at HTMLParagraphElement.eventHandler (angular.js:3032)

(anonymous) @ angular.js:11655

(anonymous) @ angular.js:8596

$apply @ angular.js:14567

(anonymous) @ angular.js:21571

eventHandler @ angular.js:3032

作为参考，我将包括三个HTML页面的代码和controllers.js代码

我还有一个具有文件结构的Plunker，可以更深入地了解文件结构。（Plunker没有显示任何我不确定是否是Plunke或我做错了什么）：https://plnkr.co/edit/vWSVFZyxdYcnynSCH7IB?p=info

HTML - index.html

<body class="disable-select">

    <div class="main" ng-view></div>
</body>

HTML - list.html

<div class="row">
  <h1>Planet Quizzes</h1>
</div>

<div class="row">
  <div class="col-xs-4 cf" ng-repeat="item in quizzes">
    <a href="#/details/{{ quizzes.indexOf(item) }}">
      {{ item.questionType }}
    </a>
  </div>
</div><!-- END ROW -->

HTML details.html

 <div id="myQuiz" class="container-fluid" ng-model="quizzess">
  <div class="row">
    <div class="col-xs-12">
      <h1>Test Your Knowledge: <span>{{quizzes[whichItem].questionType}}</span> </h1> 
    </div>
  </div><!-- END ROW -->

  <div class="progress">  
    <div class="{{ ($index === activeQuestion) ? 'on' : 'off' }} 
        {{ (quizzes.questionState === 'answered') ? 'answered' : 'unanswered' }}
        {{ (quizzes.correctness === 'correct') ? 'correct' : 'incorrect' }}" 
      ng-repeat="quiz in quizzes">
    </div>
  </div><!-- END PROGRESS BAR -->

<div class="intro {{ (activeQuestion > -1) ? 'inactive' : 'active' }}"> 
    <h2>Welcome</h2>
    <p>Click to begin to test your knowledge of Saturn.</p>
    <p class="btn" ng-click="activeQuestion = 0">Begin</p>
</div> <!-- END INTRO -->

  <div class="row">
    <div class="question 
        {{ $index === activeQuestion ? 'active' : 'inactive' }}
        {{ quizzes.questionState === 'answered' ? 'answered' : 'unanswered' }} col-xs-10">
      <p class="txt">{{ quizzes[whichItem].question }}</p>
      <p class="ans" 
        ng-click="selectAnswer($parent.$index, $index)" 
        ng-repeat="Answer in quizzes[whichItem].answers">{{ Answer.text }}</p>

      <div class="feedback">
        <p ng-show="quizzes.correctness === 'correct'"><strong>Correct</strong>.</p>
        <p ng-show="quizzes.correctness === 'incorrect'">Oops! That is not correct.</p>
        <p> {{ quizzes.feedback }} </p>
        <div class="btn" ng-click="selectContinue()">Continue</div>
      </div>
      <!-- END FEEDBACK -->
    </div><!-- END QUESTION -->
  </div><!-- END ROW -->

JS - controllers.js

var quizListControllers = angular.module('quizListControllers', ['ngRoute', 'ngAnimate', 'ngSanitize']);

quizListControllers.controller('ListController', ['$scope', '$http', function($scope, $http){
  $http.get('js/data.json').success(function(data) {
    $scope.quizzes = data;
    $scope.quizOrder = 'name';
  });
}]);

quizListControllers.controller('DetailsController', ['$scope', '$http','$routeParams', '$sce', function($scope, $http, $routeParams, $sce){
    $scope.score = 0;
    // $scope.activeQuestion = -1;
    $scope.activeQuestionAnswered = 0;
    $scope.percentage = 0;

    $http.get('js/data.json').success(function(data) {
      $scope.quizzes = data;
      $scope.whichItem = $routeParams.itemId;
      $scope.totalQuestions = $scope.quizzes.length; 
    });

    $scope.selectAnswer = function(qIndex,aIndex){

      var questionState = $scope.quizzes[qIndex].questionState;

      if(questionState != 'answered') {
        $scope.quizzes[qIndex].selectedAnswer = aIndex;
        var correctAnswer = $scope.quizzes[qIndex].correct;

        $scope.quizzes[qIndex].correctAnswer = correctAnswer;

        if(aIndex === correctAnswer){
          $scope.quizzes[qIndex].correctness = 'correct';
          $scope.score += 1;
        }
        else{
          $scope.quizzes[qIndex].correctness = 'incorrect';
        }

        $scope.quizzes[qIndex].questionState = 'answered';
      }

      $scope.percentage = (($scope.score / $scope.totalQuestions) * 100).toFixed(1);
    }

    $scope.isSelected = function(qIndex,aIndex){
      return $scope.quizzes[qIndex].selectedAnswer === aIndex;
    }

    $scope.isCorrect = function(qIndex,aIndex){
      return $scope.quizzes[qIndex].correctAnswer === aIndex;
    }

    $scope.selectContinue = function(){
      return $scope.activeQuestion += 1;
    }

}]);

我认为它与问题div中的ng-click有关，但这是原始教程中的代码并使用原始文件结构（可以在上面的Github链接中找到或here ）。也许有些事情发生了变化，但我无法弄明白。我很欣赏任何见解。

Answer 1

在details.html文件中用[$ index]替换[whichItem]的实例，并在Controller.js中更改此行：

 $scope.activeQuestion = -2; //uncommented and changed from -1 to -2

定义的var undefined AngularJS

1 个答案: