AngularJS单篇文章视图$http GET请求仅刷新页面时生效问题

兄弟，我一看就知道你大概率栽在了路由参数监听或者控制器生命周期的坑里！当你从列表页点“阅读更多”跳转到单篇文章视图时，AngularJS的路由切换并没有触发你的GET请求，要么是控制器没重新实例化，要么是你没捕捉到路由参数的变化。下面给你一步步拆解解决方案：

1. 先检查你的路由配置 #

首先确认路由有没有阻止参数变化时的重新加载。如果你的路由设置了reloadOnSearch: false，那参数变了路由也不会重新加载控制器，自然不会触发新的请求。正常的路由配置应该是这样的：

$routeProvider.when('/article/:articleId', {
  templateUrl: 'views/article-view.html',
  controller: 'ArticleViewController',
  // 别加reloadOnSearch: false！除非你有特殊需求
});

2. 监听路由参数变化，主动触发请求 #

很多时候AngularJS会复用控制器实例，这时候光在控制器初始化时调用一次请求是不够的，得监听路由参数的变化，参数一变就重新拉取数据。修改你的ArticleViewController：

app.controller('ArticleViewController', ['$scope', '$routeParams', '$http', 
function($scope, $routeParams, $http) {
  // 把加载文章的逻辑抽成函数
  function loadArticle() {
    const articleId = $routeParams.articleId;
    $http.get(`/api/articles/${articleId}`)
      .then(res => {
        $scope.currentArticle = res.data;
      })
      .catch(err => {
        console.error('加载文章失败:', err);
      });
  }

  // 页面初始化时先加载一次
  loadArticle();

  // 监听路由变化，参数更新就重新加载
  $scope.$on('$routeChangeSuccess', () => {
    loadArticle();
  });
}]);

如果你用的是ui-router，就换成监听$stateChangeSuccess或者直接监听$stateParams的变化：

$scope.$watch(() => $stateParams.articleId, (newId) => {
  if (newId) loadArticle();
});

3. 检查“阅读更多”的跳转方式 #

别用原生的window.location.href或者纯href跳转！这会绕开AngularJS的路由系统，要么刷新页面，要么无法触发路由状态变化。正确的姿势是用AngularJS提供的跳转方式：

• 模板里用ng-href：

<a ng-href="#/article/{{article._id}}">阅读更多</a>

• 控制器里用$location：

$scope.goToArticle = (articleId) => {
  $location.path(`/article/${articleId}`);
};

4. 排查缓存问题 #

如果以上都没问题，那可能是浏览器或者$http的缓存搞的鬼。可以在GET请求里强制禁用缓存：

$http.get(`/api/articles/${articleId}`, { cache: false })
  .then(...)

或者在后端接口里设置响应头，禁止缓存该API的返回结果。

按照上面的步骤排查，基本就能解决切换视图时请求不生效的问题了！

内容的提问来源于stack exchange，提问作者James Brett