索引視圖未綁定到我的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，但尚未在angulat.min.js之后在index.html中添加插件庫。在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控制器。 您只應在要針對特定​​操作/事件調用的某些函數內添加此類代碼。 這是您的代碼版本的有效插件：

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