0
我有一個控制器「CourseController」，它控制2個HTML頁面，它通過cookies檢測當前用戶是老師還是學生，然後在「課程」中獲取他/她的所有課程。 html「我使用控制器和ng-repeat列出所有課程，當用戶點擊任何課程時，此操作會觸發」CourseController「中的」getCoursebyID「函數，該函數捕獲點擊課程的」id「由用戶獲得該課程，然後將當前的HTML頁面更改爲「singleCourse.html」，我想在該頁面上顯示該課程的名稱&說明，但屏幕上未顯示任何內容。AngularJS - 在HTML頁面之間傳輸數據
Courses.html：
<html>
<head>
<script src="js/app/angular.min.js" type="text/javascript"></script>
<script src="js/scripts/app.js" type="text/javascript"></script>
<script src="js/modules/CourseController.js" type="text/javascript"></script>
</head>
<body data-ng-app="CleverZone">
<ul class="list-group" data-ng-controller = "CourseController" data-ng-init="init()">
<li class="list-group-item media v-middle" data-ng-repeat="item in RegistedCourse|limitTo:3">
<div class="media-body">
<a href="" class="text-subhead list-group-link" data-ng-click="getCoursebyID(item.id)">{{item.name}}</a>
</div>
<div class="media-right">
<div class="progress progress-mini width-100 margin-none">
<div class="progress-bar progress-bar-green-300" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%;">
</div>
</div>
</div>
</li>
</ul>
</body>
</html>
CourseController.js：
app.controller('CourseController', ["$scope", "$http","$cookieStore" ,function ($scope, $http, $cookieStore) {
$scope.RegistedCourse;
$scope.CreatedCourse;
$scope.Course;
$scope.init = function() {
if($cookieStore.get('type') == "ROLE_TEACHER"){
$scope.getCourseCreated(); // return courses of teacher
}else{
$scope.getCourseRegisted(); // return courses of student
}
};
$scope.getCourseRegisted = function() {
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') );
$http({
method: 'GET',
url: 'http://localhost:8080/courseRegistedIn/'
}).then(function successCallback(response) {
$scope.RegistedCourse = response.data;
}, function errorCallback(response) {
alert("Course Registed in fetching failed");
});
};
$scope.getCourseCreated = function() {
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') );
$http({
method: 'GET',
url: 'http://localhost:8080/courseCreated/'
}).then(function successCallback(response) {
$scope.CreatedCourse = response.data;
}, function errorCallback(response) {
alert("Course Created in fetching failed");
});
};
$scope.getCoursebyID = function(idd){
console.log(idd);
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password'));
$http({
method: 'GET',
url: 'http://localhost:8080/course/'+idd,
}).then(function successCallback(response) {
$scope.Course = response.data;
window.location = "/singleCourse.html";
}, function errorCallback(response) {
alert("Course data in fetching failed");
});
}
}]);
singleCourse.html：
<html>
<head>
<script src="js/app/angular.min.js" type="text/javascript"></script>
<script src="js/scripts/app.js" type="text/javascript"></script>
<script src="js/modules/CourseController.js" type="text/javascript"></script>
</head>
<body data-ng-app="CleverZone">
<div class="page-section padding-top-none" >
<div class="media media-grid v-middle">
<div class="media-left">
<span class="icon-block half bg-blue-300 text-white">1</span>
</div>
<div class="media-body" data-ng-controller = "CourseController">
<h1 class="text-display-1 margin-none">{{Course.name}}</h1>
</div>
</div>
<br/>
<p class="text-body-2">{{Course.description}}</p>
</div>
</body>
</html>
app.js：
var app = angular.module("CleverZone", ['ngCookies']);
*注意：AngularJS V1.6.4