Question

我正在编写一个小对话框控制器，它接受一个问题，一组答案并标记正确答案的索引。我需要让用户添加多个问题，并将它们存储在一个数组中。

一切正常，直到我尝试将包含有关问题的详细信息的JSON推送到我之前创建的数组。在尝试推送时，JS抛出错误：Cannot read property 'push' of undefined。我读了很多关于如何在Angular中将元素/值推送到数组的线程，但似乎没有人有完全相同的问题。

这是我的代码：

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);
            }
        }
    };
}

正如您所看到的，questionSet应该保留问题，并在控制器的开头定义和初始化。

然后在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

在父控制器中定义$ scope.questionSet，而不是在dialogcontroller中定义。

默认情况下，MdDialog使用隔离范围。您可以通过在TestController中的$ mdDialog调用中传递scope：$ scope来使用父控制器作用域。

AngularJS控制器中的数组未初始化

1 个答案: