2017-07-26 48 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

相关问题