我有以下模块来定义我的角度应用程序。
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 :(得分：0)
您正在使用ngRoute，但是在angulat.min.js之后您还没有在index.html中添加插件库。在1.2版之后，必须单独添加angular-route.js，它不会＆＃39 ;进入主库。 e.g。
<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 controller。您应该仅在您要在特定操作/事件上调用的某个函数内添加此类代码。
这是您的代码版本的工作插件：