Question

我有一个控制器＆＃34; CourseController＆＃34;它控制2个HTML页面，它通过cookie检测当前用户是教师还是学生，然后在＆＃34; Courses.html＆＃34;中获取所有他/她的课程。我使用控制器和ng-repeat列出所有课程，当用户点击任何课程时，此操作会触发功能＆＃34; getCoursebyID＆＃34;在＆＃34; CourseController＆＃34;中找到，该函数捕获＆＃34; id＆＃34;用户点击的课程并获得该课程，然后将当前的HTML页面更改为＆＃34; singleCourse.html＆＃34;，我希望在该页面上显示该课程的名称＆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

Answer 1

我认为你需要在角度使用路由器来做到这一点。寻找ng-route。

AngularJS - 在HTML页面之间传输数据

1 个答案: