2017-07-26 63 views
0

我有以下模塊,它定義了我的角度應用程序。索引視圖不綁定到我的angularjs應用程序中的控制器

     var ang = angular.module('mainapp', ['ngRoute']); 


        ang.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
         $routeProvider. 

           when("/home", { 
            templateUrl: "homepage.html", 
            controller: "homeController" 
           }). 
           when("/quiz", { 
            templateUrl: "quizpage.html", 
            controller: "quizController" 
           }). 

           when("/", { 
            templateUrl: "index.html", 
            controller: "indexController" 
           }); 
           //otherwise({ redirectTo: '/' }); 
        }]); 



        ang.controller('indexController', function ($scope) { 
         $scope.btn = "Welcome" 
         $scope.Login = function() { 
          alert("Thanks "); 
          $location.path("home"); 
         }; 
        }); 

        ang.controller('homeController', function ($scope) { 
         // initialize if you can 
         window.history.go(-1); 
         $scope.salutations = [{ name: "Mr", id: 1 }, { name: "Mrs", id: 2 }, { name: "Ms", id: 3 }, { name: "Jr", id: 4 }, { name: "Mister", id: 5 }, { name: "Dr", id: 6 }]; 

         $scope.profile = { 
          name: "", 
          email: "", 
          contact: "", 
          division: "", 
          feedback: "", 

         }; 

         $scope.submitInfo = function (profile) { 
          alert("Thanks " + profile.name + ". Lets get to the Quiz now."); 
          $location.path("quiz"); 
         }; 
        }); 

        ang.controller('quizController', function ($scope) { 
         //initialize if you can 
         window.history.go(-1); 
         $scope.questions = [ 
             { 
              "questionText": "Why is the sky blue?", "answers": [ 
              { "answerText": "blah blah 1", "correct": true }, 
              { "answerText": "blah blah 2", "correct": false }, 
              { "answerText": "blah blah 3", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "Why is the meaning of life?", "answers": [ 
              { "answerText": "blah blah 1", "correct": true }, 
              { "answerText": "blah blah 2", "correct": false }, 
              { "answerText": "blah blah 3", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "How many pennies are in $10.00?", "answers": [ 
              { "answerText": "1,000.", "correct": true }, 
              { "answerText": "10,000.", "correct": false }, 
              { "answerText": "A lot", "correct": false } 
              ] 
             }, 
             { 
              "questionText": "What is the default program?", "answers": [ 
              { "answerText": "Hello World.", "correct": true }, 
              { "answerText": "Hello Sunshine.", "correct": false }, 
              { "answerText": "Hello my ragtime gal.", "correct": false } 
              ] 
             } 
         ]; 

         $scope.answers = {}; 
         $scope.correctCount = 0; 
         $scope.showResult = function() { 
          $scope.correctCount = 0; 
          var qLength = $scope.questions.length; 
          for (var i = 0; i < qLength; i++) { 
           var answers = $scope.questions[i].answers; 
           $scope.questions[i].userAnswerCorrect = false; 
           $scope.questions[i].userAnswer = $scope.answers[i]; 
           for (var j = 0; j < answers.length; j++) { 
            answers[j].selected = "donno"; 
            if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === true) { 
             $scope.questions[i].userAnswerCorrect = true; 
             answers[j].selected = "true"; 
             $scope.correctCount++; 
            } else if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === false) { 
             answers[j].selected = "false"; 
            } 
           } 
          } 
          //console.log($scope.answers); 
         }; 
         $scope.submitQuiz = function (quiz) { 
          alert("Congrats."); 
          $location.path("index"); 
         }; 
        }); 

我想用的土地歡迎按鈕索引頁的用戶和在點擊我想利用用戶的主頁,當用戶填寫主頁上的信息,應該去測驗頁面。

但是該應用程序根本沒有將控制器綁定到索引頁面。

 <!DOCTYPE html> 
    <html data-ng-app="mainapp"> 
    <head> 
     <title>WinPrizes</title> 
    </head> 
    <body > 

     <div data-ng-controller="indexController"> 
      <button ng-click="Login()">{{btn}}</button> 
     </div> 
     <script src="Scripts/angular.min.js"></script> 
     <script src="app/app.module.js"></script> 
     <script src="app/main.js"></script> 

    </body> 
    </html> 

當索引頁打開時,它顯示按鈕文本爲{{btn}}。這些不是部分模板。我只是想切換到不同的html頁面,作爲導航用戶的一部分,點擊每個頁面上的按鈕。

+0

看看瀏覽器控制檯日誌中的加載錯誤?由於插值沒有評估,看起來框架在加載過程中有錯誤。 – Chandermani

+0

它顯示錯誤:[$控制器:ctrlreg] http://errors.angularjs.org/1.6.5/$controller/ctrlreg?p0=indexController – krrishna

回答

0

您正在使用ngRoute,但您尚未在index.html中添加插件庫後的angulat.min.js在版本1.2以後angular-route.js必須單獨添加它不會進入main圖書館。例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"> 
</script> 

此外,您使用的所有控制器$位置服務,那麼你已經通過在控制器功能作爲一個依賴。

您需要index.html上的ng-view指令才能進行路由工作。並且要小心您的視圖是部分視圖(包含部分html代碼)。你爲什麼在控制器的初始化時增加了window.history.go(-1);?因爲它總是會回到上一頁onload o controller。你只能在你要調用特定動作/事件的某個函數內添加這樣的代碼。 這裏的工作plunker您的代碼版本:

https://plnkr.co/edit/ADWf012Q7mTVBR3svPYb?p=preview

+0

現在它給了我錯誤:第8行,第7列未處理的異常在http:// localhost:52366/Scripts/angular-route.min.js中。即使使用網址。 0x800a138f - JavaScript運行時錯誤:無法獲取屬性「模塊」的未定義或空引用 – krrishna

+0

@krrishna檢查更新的答案。下載plunker,然後檢查本地主機上的URL更改。此外,如果您不希望用戶在您的應用程序中查看任何網址(如果他沒有登錄),那麼您可以創建角度服務,以跟蹤登錄狀態並在該路線對象的解析屬性中調用它。 – Shantanu

+0

對我來說不幸的是,它不會去歡迎按鈕(index1.html)頁面。它只能到index.html。儘管你的plunker代碼有效。我把它複製到我的VS解決方案。 – krrishna

相關問題