AngularJS点击课程跳转详情页后无法显示选中数据的问题咨询

我之前也碰到过一模一样的问题！你现在的问题核心在于AngularJS的作用域隔离机制：当你通过$location.path跳转到courseView时，ng-view会加载新的视图和对应的控制器，这个新控制器的$scope和之前列表页面的$scope完全是两个独立的作用域，所以之前赋值的$scope.selectedCourse在新页面根本访问不到。

下面给你两种最常用的解决方案，按需选择：

方案一：用单例服务共享数据（推荐，适合内部跳转场景） #

AngularJS的服务是单例模式，也就是说整个应用里只会有一个实例，所有控制器都能共享它的数据，这是跨控制器传递数据的最佳实践。

步骤： #

1. 创建一个自定义服务来存储选中的课程
2. 列表页面点击课程时，把数据存入服务
3. 详情页面控制器从服务中取出数据

代码示例： #

1. 定义共享服务

angular.module('yourApp')
  .service('CourseSharedService', function() {
    let selectedCourse = null;

    this.setSelectedCourse = function(course) {
      selectedCourse = course;
    };

    this.getSelectedCourse = function() {
      return selectedCourse;
    };
  });

2. 列表页面控制器（处理点击事件）

angular.module('yourApp')
  .controller('CourseListController', function($scope, $location, CourseSharedService) {
    // 假设你的课程数据已经赋值给$scope.courses
    $scope.courses = [/* 你的课程数据数组 */];

    $scope.selectCourse = function(course) {
      // 把选中的课程存入服务
      CourseSharedService.setSelectedCourse(course);
      // 跳转到详情页
      $location.path('/courseView');
    };
  });

3. 详情页面控制器（获取选中的课程）

angular.module('yourApp')
  .controller('CourseDetailController', function($scope, CourseSharedService, $location) {
    // 从服务中取出选中的课程
    $scope.selectedCourse = CourseSharedService.getSelectedCourse();
    
    // 可以加个判断，防止直接访问详情页时数据为空
    if (!$scope.selectedCourse) {
      // 跳回列表页
      $location.path('/courseList');
    }
  });

方案二：通过路由参数传递课程ID（适合需要直接访问详情页的场景） #

如果希望用户可以通过直接输入URL访问某门课程的详情页（比如/courseView/123），或者刷新详情页后数据不丢失，更适合用路由参数传递课程ID，然后在详情页根据ID重新获取数据。

步骤： #

1. 修改路由配置，添加参数占位符
2. 列表页面点击时，跳转路径带上课程ID
3. 详情页面通过$routeParams获取ID，再获取对应课程数据

代码示例： #

1. 路由配置修改

angular.module('yourApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/courseList', {
        templateUrl: 'course-list.html',
        controller: 'CourseListController'
      })
      .when('/courseView/:courseId', { // 添加:courseId作为参数
        templateUrl: 'course-detail.html',
        controller: 'CourseDetailController'
      })
      .otherwise({redirectTo: '/courseList'});
  });

2. 列表页面控制器（跳转时带ID）

angular.module('yourApp')
  .controller('CourseListController', function($scope, $location) {
    $scope.courses = [/* 你的课程数据数组，每个课程要有id字段 */];

    $scope.selectCourse = function(course) {
      // 跳转路径带上课程ID
      $location.path('/courseView/' + course.id);
    };
  });

3. 详情页面控制器（通过ID获取课程）

angular.module('yourApp')
  .controller('CourseDetailController', function($scope, $routeParams, $location) {
    // 假设你的课程数据存在一个数组里，或者可以通过服务获取
    const allCourses = [/* 课程数据数组 */];
    
    // 通过$routeParams获取课程ID，找到对应课程
    $scope.selectedCourse = allCourses.find(course => course.id == $routeParams.courseId);
    
    // 同样可以加判断，防止ID无效
    if (!$scope.selectedCourse) {
      $location.path('/courseList');
    }
  });

不推荐的方案：用$rootScope传递 #

虽然可以把selectedCourse赋值给$rootScope.selectedCourse，然后在详情页直接访问，但这种方式会污染全局作用域，不利于代码维护，所以除非特殊情况，不建议使用。

内容的提问来源于stack exchange，提问作者lio lrn