AngularJS- HTML页面之间传输数据

我有一个控制器" coursecontroller"，该控制器控制2个HTML页面，它检测到当前的用户是通过cookie的老师还是学生，然后在"他/她的课程"课程中"。用户点击并获取该课程，然后将当前的HTML页面更改为" Singlecourse.html"，我想在其中显示该课程的名称＆amp;描述，但屏幕上什么也没出现。

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

我认为您需要使用Angular的路由器来做到这一点。寻找ng-route。

相关内容

最新更新

热门标签：