索引视图未绑定到我的 angularjs 应用程序中的控制器

Question

我有以下定义我的角度应用程序的模块。

                        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 页面。

Answer 1

您正在使用 ngRoute，但您没有在 index.html 中的 angulat.min.js 之后添加插件库 在 1.2 版以后的 angular-route.js 必须单独添加它不会进入主库.例如

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

此外，您在所有控制器中都使用了 $location 服务，因此您必须将其作为依赖项传递给控制器​​函数。

您需要 index.html 上的 ng-view 指令才能使路由工作。请注意您的视图是部分视图（包含部分 html 代码）。另外为什么在控制器初始化时添加window.history.go(-1);？因为它总是会回到上一页 onload o 控制器。您应该仅在您要针对特定​​操作/事件调用的某个函数中添加此类代码。 这是您的代码版本的工作 plunker：

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