AngularJS：尝试使用ng-repeat显示内容，但页面显示为空白

Question

这是我尝试显示内容的页面。它显示空白。我的应用程序是单页面应用程序，因此大多数代码都在index.html文件中

verbPractice.html

<div>
    <h1>Practice verbs here</h1>
    <div class="row" ng-repeat="sentence in listOfSentences">
        <div class="col-xs-12">
            <p>{{sentence.first}} {{sentence.second}} {{sentence.third}}</p>
        </div>
    </div>
</div>

此页面链接到另一个名为verbSelect.html的页面。以下是该页面的相关代码

    <div class="btn btn-primary" ui-sref="app.verbPractice" ng-click="storeInfo(); generateSentences()">Submit</div>

上述两个页面都在同一个名为verbController的控制器下：

(function() {
'use strict';

angular.module('arabicApp')
    .controller('verbController', ['$scope', 'verbFactory', 'pronounFactory', 'attachedFactory', function($scope, verbFactory, pronounFactory, attachedFactory){
        //Gets verbs from server
        $scope.verbArray = verbFactory.getVerbs().query(
            function(response) {
                $scope.verbArray = response;
            }
        );

        //Gets pronouns from server
        $scope.pronouns = pronounFactory.getPronouns().query(
            function(response) {
                $scope.pronouns = response;
            }
        );

        $scope.attached = attachedFactory.getAttached().query(
            function(response) {
                $scope.attached = response;
            }
        );

        //Stores the array of selected verbs
        $scope.selectedVerbs = [];
        $scope.numSelectedVerbs = 0;

        //Searches theArray for name and returns its index. If not found, returns -1
        $scope.searchArray = function(theArray, name) {
            for (var i = 0; i < theArray.length; i++) {
                if (theArray[i].name === name) {
                    return i;
                }
            }
            return -1;
        };

        //Adds verbs to selected list
        $scope.addToSelected = function(theVerb)  {
            var num = $scope.searchArray($scope.selectedVerbs, theVerb.name);
            var divToChange = document.getElementById("verbSelect_"+theVerb.name);
            if (num > -1) {                                             //Found. Remeove it from selectedVerbs
                $scope.selectedVerbs.splice(num, 1);
                divToChange.className = divToChange.className.replace( /(?:^|\s)listItemActive(?!\S)/g , '' );
                $scope.numSelectedVerbs = $scope.numSelectedVerbs - 1;
            } else {                                                    //Not found. Add it in
                $scope.selectedVerbs.push(theVerb);
                divToChange.className += " listItemActive";
                $scope.numSelectedVerbs = $scope.numSelectedVerbs + 1;
            }
        };

        //Stores how many practice questions the user wants
        $scope.howMany = 0;

        //Stores what tense of verbs the user wants
        $scope.verbTense = "Both";

        //Stores what form the user wants
        $scope.verbVoice = "Both";

        //Include commands?
        $scope.includeCommands = false;

        //Sentense that will be generated
        $scope.listOfSentences = [];


        $scope.generateSentence = function(isCommand, theTense, theVoice) {
            var sent = {"first": "", "second": "", "third": ""};

            var attachedPicker = Math.floor(Math.random()*14);
            var attachedToUse = $scope.attached[attachedPicker].attached;

            var pronounPicker = Math.floor(Math.random()*14);
            var pronounToUse = $scope.pronouns[pronounPicker].pronoun;
            sent.first = pronounToUse;


            var verbPicker = Math.floor(Math.random()*$scope.numSelectedVerbs);
            var verbToUse = $scope.selectedVerbs[verbPicker][theTense][pronounToUse];


            if (isCommand === true) {
                sent.second = verbToUse;
            } else {
                if (theVoice === "Passive") {
                    if (theTense === "Past") { sent.second = "were"; }
                    else { sent.second = "are"; }
                    sent.third = verbToUse;
                } else {
                    sent.second = verbToUse;
                    sent.third = attachedToUse;
                }
            }
            return sent;
        };

        $scope.storeInfo = function() {
            localStorage.setItem("howMany", $scope.howMany);
            localStorage.setItem("verbTense", $scope.verbTense);
            localStorage.setItem("verbVoice", $scope.verbVoice);
            localStorage.setItem("includeCommands", $scope.includeCommands);
        };

        $scope.getStoredInfo = function() {
            $scope.howMany = localStorage.getItem("howMany");
            $scope.verbTense = localStorage.getItem("verbTense");
            $scope.verbVoice = localStorage.getItem("verbVoice");
            $scope.includeCommands = localStorage.getItem("includeCommands");
        };

        //Generates sentences using the variables from verbSelect
        $scope.generateSentences = function() {
            $scope.getStoredInfo();
            var tensePicker;
            var voicePicker;
            var doCommand;
            var rand;

            for (var i = 0; i < $scope.howMany; i++) {
                //Picks the verb tense
                if ($scope.verbTense === "Both") {
                    rand = Math.floor(Math.random());
                    if (rand === 0) { tensePicker = "Past"; }
                    else { tensePicker = "Present"; }
                } else {
                    tensePicker = $scope.verbTense;
                }

                //Picks the verb voice
                if ($scope.verbVoice === "Both") {
                    rand = Math.floor(Math.random());
                    if (rand === 0) { voicePicker = "Active"; }
                    else { voicePicker = "Passive"; }
                } else {
                    voicePicker = $scope.verbVoice;
                }

                //If the voice is passive, use past tense
                if ($scope.verbVoice === "Passive") { tensePicker = "Past"; }

                //Determines if the sentence will be a command sentence or not
                if ($scope.includeCommands === true) {
                    rand = Math.floor(Math.random() * 6);
                    if (rand === 0) { doCommand = true; }
                    else { doCommand = false; }
                } else {
                    doCommand = false;
                }

                var sentence = $scope.generateSentence(doCommand, tensePicker, voicePicker);
                $scope.listOfSentences.push(sentence);
            }
            console.log($scope.listOfSentences);
        };
    }])

;
})();

使用ng-model在此verbSelect.html页面上设置变量：howMany，verbTense，verbVoice，isCommand。 verbSelect.html页面和verbPractice.html页面都在同一个控制器下。

一切似乎都很好。在我的generateSentences（）函数结束时，我将$ scope.listOfSentences输出到日志，它显示没有任何问题，数组正在填充正常。但是，在我的verbPractice.html页面中，除<h1>标题外没有任何内容显示。出于某种原因，即使填充了$ scope.listOfSentences数组，ng-repeat似乎也不会循环。有谁知道为什么？

对不起，很长的帖子

感谢您花时间阅读并回答这个问题！