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了。