1
所以我想做一個ng-route頁面，但不知何故它不能正常工作，並且沒有爲ng-route部門顯示任何內容，我搜索了很多帖子，仍然找不到問題。有人能指點我正確的方向嗎？ng-route沒有顯示在我的html上，它有什麼問題？
代碼：http://embed.plnkr.co/c9rklHx59BDw4RIpMPfu
var timeTotal = 10; //seconds
var fRate = 500;
var timeElapsed = 0;
var n = 0;
function fRotate() {
\t document.getElementById('timerLine').style.transform = "rotate(" + n + "deg)";
\t
\t n += (360/timeTotal) * fRate/1000;
\t
\t timeElapsed += fRate;
\t
\t //test
\t //alert(n);
\t if (n <= 360) {
\t setTimeout(fRotate, fRate);
\t }
\t else {
\t \t n = 0 ;
\t }
}
function startRotate() {
\t n = 0;
\t timeElapsed = 0;
\t fRotate();
\t //play audio
}
//intro
//schedule
var start = 0;
var end = 0;
var myString = '';
function t(start, end, timeElapsed, myString) {
\t if (timeElapsed >= start && timeElapsed <= end){
\t \t \t return myString;
\t \t }
\t else {
\t \t return '';
\t } \t \t
}
var x = 10;
var t = 0;
// create the module and name it myApp
\t var app = angular.module('myApp', ['ngRoute', 'ngSanitize']);
\t // configure our routes
\t app.config(function($routeProvider) {
\t \t $routeProvider
\t \t \t // route for the intro
\t \t \t .when('/', {
\t \t \t \t templateUrl : 'pages/intro.html',
\t \t \t \t controller : 'introController'
\t \t \t })
\t \t \t //ROOMS
\t \t \t .when('/stairs', {
\t \t \t \t templateUrl : 'pages/stairs.html',
\t \t \t \t controller : 'mainController'
\t \t \t })
\t \t \t
.when('/forest', {
\t \t \t \t templateUrl : 'pages/forest.html',
\t \t \t \t controller : 'forestController'
\t \t \t })
\t \t
.otherwise({redirectTo: '/'});
\t });
//dynamiclly update angularjs to read ng-bind-html elements
\t app.directive('dynamic', function($compile) {
\t \t return {
\t \t \t restrict: 'A',
\t \t \t replace: true,
\t \t \t link: function (scope, element, attrs) {
\t \t \t \t scope.$watch(attrs.dynamic, function(html) {
\t \t \t \t \t element[0].innerHTML = html;
\t \t \t \t \t $compile(element.contents())(scope);
\t \t \t \t });
\t \t \t }
\t \t };
\t });
\t
// create the controller and inject Angular's $scope
\t app.controller('mainController', function($scope) {
\t \t // create a message to display in our view
\t \t $scope.message = 'this is a placeholder';
\t });
//intro
\t app.controller('introController', function($scope, $interval, $sce) {
\t \t $scope.introLoad = function() {
\t \t \t document.getElementById("startButton").style.display = "none";
\t \t \t
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = "Hey!";
\t \t \t },1.5*x,1);
\t \t \t
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = "HEY";
\t \t \t },3*x,1);
\t \t \t
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = 'WAKE UP';
\t \t \t \t $scope.wakeUpButton = "inline-block";
\t \t \t },4.5*x,1);
\t \t };
\t \t $scope.introWakeUp = function(){
\t \t \t $scope.wakeUpButton = "none";
\t \t \t $scope.intro = "Great, I see you are awake. We are almost at Gallow Green. The King’s Ball will be happening this morning and a feast will commence at nightfall. I assume you will be attending them?";
\t \t \t $scope.attendButton = "inline-block";
\t \t };
\t \t $scope.introYes = function(){
\t \t \t $scope.attendButton = "none";
\t \t \t $scope.intro = "Great! So I will be seeing you there!";
\t \t \t $scope.introLoad_2();
\t \t };
\t \t $scope.introNo = function(){
\t \t \t $scope.attendButton = "none";
\t \t \t $scope.intro = "Oh my! This is definitely something you wouldn’t want to miss! Come and stop by if you have time.";
\t \t \t $scope.introLoad_2();
\t \t };
\t \t //second part of intro sequence after attendance is presented
\t \t $scope.introLoad_2 = function(){
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = $sce.trustAsHtml('By the way my name is <input type="text" ng-model="name" required>');
\t \t \t \t $scope.confirmNameButton = "inline-block";
\t \t \t },2.5*x,1);
\t \t };
\t \t $scope.introConfirmName = function(){
\t \t \t $scope.confirmNameButton = "none";
\t \t \t $scope.intro = '<input type="text" ng-model="name">: When you see someone new there, you should give them a name so you don’t forget who you’ve met. That would’ve been quite embarrassing if you do.';
\t \t \t $scope.intro = $sce.trustAsHtml($scope.intro);
\t \t \t
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = $sce.trustAsHtml('<input type="text" ng-model="name">: Hey look! That is Gallow Green right there! Looks like we have arrived! I will see you then!');
\t \t \t },2.5*x,1);
\t \t \t
\t \t \t $interval(function(){
\t \t \t \t $scope.intro = $sce.trustAsHtml('<input type="text" ng-model="name">: Hey look! That is Gallow Green right there! Looks like we have arrived! I will see you then!<br><input type="text" ng-model="name"> rode off on his horse and disappeared into the town.<br><br><a href="#/stairs" onclick="startRotate()"> Get off the horse </a>');
\t \t \t },4*x,1);
\t \t };
\t });
//The Woodlands
\t app.controller('forestController', function($scope) {
\t \t $scope.header = 'The Woodland';
$scope.desc = 'An uninhabited land with a dense growth of fir trees above. It is so dense that you have to struggle to find a hint of the sky through the intertwining branches.';
\t }<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
\t <meta charset="utf-8">
<!-- AngularJS -->
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.js"></script>
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-sanitize.js"></script>
<!-- JS -->
<script src="script.js"></script>
<!-- CSS -->
<style>
@charset "utf-8";
body {
\t color: #000000;
}
p{
\t font-size: 150%;
}
/* unvisited link */
a:link {
color: #ffffff;
}
/* visited link */
a:visited {
color: #ffffff;
}
/* mouse over link */
a:hover {
color: #888888;
}
/* selected link */
a:active {
color: #000000;
}
input[type=text] {
\t background-color: #000000;
\t color: #ffffff;
\t width: 150px;
\t font-size: 100%;
}
table {
\t border: none;
}
td {
\t font-size: 150%;
}
#timer {
\t position: absolute;
\t top: 0;
\t left: 0;
\t bottom: 0;
\t width: 220px;
\t overflow: hidden; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable rollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
\t background-color: #000000;
}
#main {
\t position: fixed;
\t top: 0; /* Set this to the height of the header */
\t left: 220px;
\t right: 0;
\t bottom: 0;
\t overflow: auto;
\t background-color: #000000;
}
#header{
\t position: fixed;
\t top: 0;
\t left: 220px;
\t right: 0;
\t height: 35%;
\t color: #ffffff;
\t text-align: left;
\t overflow: hidden;
\t background-color: #000000;
\t padding: 0px;
} \t
#content{
\t position: fixed;
\t left: 220px;
\t top: 35%;
\t right: 0;
\t bottom: 15%;
\t color: #ffffff;
\t text-align: left;
\t overflow: auto;
\t background-color: #000000;
}
#map{
\t position: fixed;
\t bottom: 0;
\t left: 220px;
\t right: 0;
\t height: 15%;
\t color: #ffffff;
\t text-align: left;
\t overflow: auto;
\t background-color: #000000;
}
#startButton {
\t width: 100%;
\t height: 100%;
\t background-color: #000000;
\t color: #ffffff;
\t border: none;
\t font-size: 1000%;
}
body{
\t text-align: center;
}
#timerCircle{
\t display:inline-block;
\t width: 200px;
\t height: 200px;
\t border: 5px solid #ffffff;
\t border-radius: 100%;
\t position: relative;
\t top: 37%;
\t left: 0;
}
#timerLine{
\t display: inline-block;
\t width: 5px;
\t height: 150px;
\t border-top: 75px solid #ffffff;
\t position: absolute;
\t top: 25px;
\t transform-origin: 1.1px 74px;
}
</style>
</head>
<body ng-controller="introController">
<div id="timer">
\t <div id="timerCircle">
\t \t <div id="timerLine"></div>
\t </div>
</div>
\t
\t <div id="main">
\t \t <div ng-view></div>
\t </div>
</body>
</html>
你得到了什麼錯誤信息？ –
沒有錯誤信息，只是沒有顯示出來，但我想@Jijo Cleetus在那裏解決了它 –