AngularJS：使用一个按钮链接到使用上的按钮

Question

我有一个网页

这一个按钮，NG-点击指令建立了一个页面是在我的网页按钮verbSelect.html

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

点击此按钮将链接到一个名为verbPractice.html的页面。链接工作，但是，页面不按预期加载。无论verbSelect.html和verbPractice.html被称为verbController

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 pronounPicker = Math.floor(Math.random()*14); 
      var pronounToUse = pronouns[pronounPicker]; 
      sent.first = pronounToUse; 

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

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

      if (isCommand === true) { 
       sent.second = verbToUse; 
      } else { 
       sent.first = pronountToUse; 
       sent.second = verbToUse; 
       sent.third = attachedToUse; 
       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(); 
      console.log($scope.howMany); 
      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") { $scope.verbVoice = "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); 
       console.log(sentence); 
       $scope.listOfSentences.push(sentence); 
      } 
     }; 
    }]) 

; 
})(); 

以下变量在verbSelect.html页

howMany 
verbVoice 
verbTense 
includeCommands 

我用NG-模型设定下认为这些会延续到下一页。但是，我有一种感觉，当页面被改变时变量被重置（是吗？）。

这就是我使用storeInfo（）和getStoredInfo（）函数的原因。我认为这样，我可以将这些变量带到下一页。

这是我verbPractice.html页面的样子

<div ng-controller="verbController"> 
    <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按钮，它链接到verbPractice.html但网页显示空白。即使console.log（$ scope.howMany）行不会显示在日志中，CONSOL.log（句子）也不会显示。我认为这意味着generateSentences（）在出于某种原因点击按钮时没有被调用。

有人能帮我理解我的网页为什么显示空白以及如何修复它？为什么点击按钮时，这些功能都不能运行？

感谢和抱歉的长期职位

Answer 1

添加$scope达到pronouns。这将导致功能generateSentence失败。

var pronounToUse = $scope.pronouns[pronounPicker]; 
var attachedToUse = $scope.attached[attachedPicker]; 
var verbToUse = $scope.selectedVerbs[verbPicker].theTense.pronounToUse; 

在使用ui-router定义state，没有必要在模板中使用ng-controller了。