AngularJSコントローラ内の配列が初期化されていません

Question

私は小さな質問コントローラーを作成しています。これは質問と1組の回答を取り、正解のインデックスを示します。私は、ユーザーが複数の質問を追加し、それらを配列に格納できるようにする必要があります。

私が先に作成した配列に質問に関する詳細を含むJSONをプッシュしようとするまでは、すべて動作します。プッシュしようとすると、JSはエラー：Cannot read property 'push' of undefinedをスローします。要素/値をAngularの配列にプッシュする方法については、いくつかのスレッドを読んでいますが、まったく同じ問題はないようです。あなたはquestionSetが質問を開催することになっていると、コントローラの開始時に定義され、初期化されて見ることができるように

function TestController($mdDialog, $scope, $mdSidenav, $mdBottomSheet, $timeout, $log) { 
    $scope.questionSet = []; 
    $scope.question = { 
     text: null, 
     answers: [], 
     correctIndex: -1 
    }; 

    $scope.clickPoP = function(ev) { 
     // Appending dialog to document.body to cover sidenav in docs app 
     // Modal dialogs should fully cover application 
     // to prevent interaction outside of dialog 
     var parentEl = angular.element(document.body); 

     $mdDialog.show({ 
      parent: parentEl, 
      targetEvent: ev, 
      templateUrl: "edit-word-dialog.tmpl.html", 
      locals: { 
       items: $scope.question 
      }, 
      controller: DialogController 
     }); 

     function DialogController($scope, $mdDialog) { 
      $scope.cancel = function() { 
       $mdDialog.hide(); 
      } 

      $scope.addQuestion = function(nextQuestion) { 
       if (nextQuestion === true) { 
        console.log($scope.question); 
        $scope.questionSet.push($scope.question); 
        console.log('added question - clearing object - waiting for next input'); 
       } else { 
        console.log($scope.questionSet); 
        console.log('added question - closing dialog box'); 
        $mdDialog.hide(); 
       } 
      } 

      $scope.setAnswer = function(index) { 
       $scope.question.correctIndex = index; 
       console.log(index); 
      } 
     } 
    }; 
} 

：

は、ここに私のコードです。

addQuestion()関数では、私は内部のすべての正しいデータを持っている私のJSONオブジェクトをquestionSetにプッシュしようとすると、エラーがスローされます。

すべてのデータ、すべてのデータバインディング、およびすべてが正しいことを確認しました。JSONを配列にプッシュしません。配列の追加を避け、管理が簡単になるようにしたいと思います。私はAngularには全く新しいことに注意してください。

ご協力いただきありがとうございました。エラーがある場合には

はここで、ダイアログボックスのコードです：

<md-dialog class="email-dialog" flex="80" flex-sm="100"> 
<md-toolbar class="toolbar-default" md-theme="{{triSkin.elements.toolbar}}" palette-background="myPurple:500"> 
    <div class="md-toolbar-tools"> 
     <h2> 
      <span>Quiz</span> 
     </h2> 
     <span flex></span> 
    </div> 
</md-toolbar> 
<md-divider></md-divider> 
<md-dialog-content class="sticky-container"> 
    <div> 
     <md-content> 
      <md-input-container> 
       <label for="question-text">Enter Question</label> 
       <input type="text" id="quiz-question" label="quiz-question" name="quiz-question" ng-model="question.text"> 
      </md-input-container> 
      <div style="float: right; width: 10%"> 
       <md-radio-group> 
        <md-radio-button value="0" aria-label="ans0" ng-click="setAnswer(0)"></md-radio-button> 
        <br/> 
        <br/> 
        <md-radio-button value="1" aria-label="ans1" ng-click="setAnswer(1)"></md-radio-button> 
        <br/> 
        <br/> 
        <md-radio-button value="2" aria-label="ans2" ng-click="setAnswer(2)"></md-radio-button> 
        <br/> 
        <br/> 
        <md-radio-button value="3" aria-label="ans3" ng-click="setAnswer(3)"></md-radio-button> 
       </md-radio-group> 
      </div> 
      <div style="float: right; width: 80%;"> 
       <md-input-container> 
        <label for="answer-one">Enter answer</label> 
        <input type="text" id="quiz-answer-one" label="quiz-answer-one" name="quiz-answer-one" ng-model="question.answers[0]"> 
       </md-input-container> 
       <md-input-container> 
        <label for="answer-two">Enter answer</label> 
        <input type="text" id="quiz-answer-two" label="quiz-answer-two" name="quiz-answer-two" ng-model="question.answers[1]"> 
       </md-input-container> 
       <md-input-container> 
        <label for="answer-three">Enter answer</label> 
        <input type="text" id="quiz-answer-three" label="quiz-answer-three" name="quiz-answer-three" ng-model="question.answers[2]"> 
       </md-input-container> 
       <md-input-container> 
        <label for="answer-four">Enter answer</label> 
        <input type="text" id="quiz-answer-four" label="quiz-answer-four" name="quiz-answer-four" ng-model="question.answers[3]"> 
       </md-input-container> 
      </div> 
      <div style="float:left;"> 
       <md-button class="md-primary" aria-label="AddQuestion" ng-click="addQuestion(true)">Add Question</md-button> 
       &nbsp; 
       <md-button class="md-secondary" aria-label="Save" ng-click="addQuestion(false)">Save</md-button> 
      </div> 
     </md-content> 
    </div> 
</md-dialog-content> 
<div class="md-actions" layout="row"> 
    <span flex></span> 
    <md-button class="md-primary" aria-label="Close" ng-click="cancel()"> 
     Close 
    </md-button> 
</div> 

Answer 1

あなたはあなたの親のコントローラでは、ないdialogcontrollerで$ scope.questionSetを定義します。

MdDialogは、既定で分離スコープを使用します。 TestControllerの$ mdDialog呼び出しでスコープ$ scopeを渡すことで、親コントローラスコープを使用できます。