ruby-on-rails - $http get 请求工作正常，除非我从重定向的外部链接按回

Question

我刚刚开始使用 Angular 和 Rails。我有客户端和服务器的 CRUD 功能。我的问题是在我进行编辑和更新我的模型(在索引页面上)并重定向到外部链接并按下浏览器的后退按钮之后。已做出调用 $http.get 请求的解析，但我的服务器实际上并未收到该请求，加载的数据是预编辑的。

例如使用我的 Post 模型，说 post.title = "hello"，编辑后，它是 "hello world"。我的服务器按预期注册和更新。没有刷新，我重定向到一个外部链接(https://reddit.com)，然后按回，我的 post.title 是“你好”。我们都知道它应该是“hello world”。我看到 resolve 和 get 请求仍然被命中，但我看到我的服务器没有收到请求。当从外部链接按下后退按钮时，如何让它发出请求并显示更新的响应。刷新总是给出正确的数据。我是否应该强制刷新它，尽管表面上已经提出了请求？

var app = angular.module('flapperNews', ['ui.router', 'templates']);

app.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl',
      resolve: {
        postPromise: ['posts', function(posts) {
          return posts.getAll();
        }]
      }
    })
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
      controller: 'PostsCtrl',
      resolve: {
        post: ['$stateParams', 'posts', function($stateParams, posts) {
          return posts.get($stateParams.id);
        }]
      }
    });


  $urlRouterProvider.otherwise('home');

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });

}]);







app.controller('MainCtrl', [
'$scope',
'$state',
'posts',
function($scope,$state, posts){
  $scope.posts = posts.posts;

  $scope.addPost = function() {
    if(!$scope.title || $scope.title === '') {return};
    posts.create({
      title: $scope.title,
      link: $scope.link
    });
    $scope.title = '';
    $scope.link = '';
  };

  $scope.editPost = function(post) {
    posts.edit(post)
  };

  $scope.deletePost = function(post) {
    posts.destroy(post)
  };

  $scope.incrementUpvotes = function(post) {
    posts.upvote(post);
  };

  $scope.decrementUpvotes = function(post) {
    posts.downvote(post)
  };


}])







app.factory('posts', [
  '$http',
  function($http){
  var obj = {
    posts: []
  };

  obj.getAll = function() {
    return $http.get('/api/posts.json').then(
      function successCallBack(response) {
        debugger
        angular.copy(response.data, obj.posts);
      },function errorCallBack(response) {
        // error message
      });
  };

  obj.get = function(id) {
    return $http.get('/api/posts/' + id + '.json').then(function(response){
      return response.data;
    });
  };

  obj.create = function(post) {
    return $http.post('/api/posts.json', post).then(
      function successCallBack(response) {
        obj.posts.push(response.data);
      }, function errorCallBack(response) {
        // error message
      });
  };

  obj.destroy = function(post) {
    return $http.delete('/api/posts/' + post.id + '.json').success(function(data) {
      var index = obj.posts.indexOf(post);
      obj.posts.splice(index, 1);
    })
  };

  obj.edit = function(post) {
    return $http.put('/api/posts/' + post.id + '.json', post).then(
      function successCallBack(response) {
        var index = obj.posts.indexOf(post);
        obj.posts[index] = response.config.data
      }, function errorCallBack(response) {
        // error message
      });
  };

  obj.addComment = function(id, comment) {
    return $http.post('/api/posts/' + id + '/comments.json', comment);
  };

  obj.upvoteComment = function(post, comment) {
    return $http.put('/api/posts/' + post.id + '/comments/' + comment.id + '/upvote.json')
    .success(function(data){
      comment.upvotes += 1;
    });
  };

  obj.downvoteComment = function(post, comment) {
    return $http.put('/api/posts/' + post.id + '/comments/' + comment.id + '/downvote.json')
    .success(function(data){
      comment.upvotes -= 1;
    });
  };

  obj.upvote = function(post) {
    return $http.put('/api/posts/' + post.id + '/upvote.json')
    .success(function(data){
      post.upvotes += 1;
    });
  };

  obj.downvote = function(post) {
    return $http.put('/api/posts/' + post.id + '/downvote.json')
    .success(function(data){
      post.upvotes -= 1;
    });
  };

  return obj;
}]);







<div class="page-header">
  <h1>Flapper News</h1>
</div>

<div ng-repeat="post in posts | orderBy:'-upvotes'">
  <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
  <span class="glyphicon glyphicon-thumbs-down" ng-click="decrementUpvotes(post)"></span>
  {{post.upvotes}}
  <span style="font-size:20px; margin-left:10px;">
    <a ng-show="post.link" href="{{post.link}}">
      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
  </span>


  <form ng-submit="editPost(post)" style="margin-top:30px;">
    <h3>Edit post</h3>

    <div class="form-group">
      <input type="text" class="form-control" placeholder="Title" ng-model="post.title"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Link" ng-model="post.link"></input>
    </div>
    <button type="submit" class="btn btn-primary">Submit Edit</button>
  </form>


  <span>
    <a href="/posts/{{post.id}}">Comments</a>
  </span>
  <span class="glyphicon glyphicon-trash" ng-click="deletePost(post)"></span>
  <span class="glyphicon glyphicon-edit" ng-click="allowEdit=true"></span>
</div>

<form ng-submit="addPost()" style="margin-top:30px;">
  <h3>Add a new post</h3>

  <div class="form-group">
    <input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>

Answer 1

我对缓存进行了一些网络搜索，并在我的 getAll() 请求中添加了 { headers: { 'Cache-Control' : 'no-cache' } }。

上一个

obj.getAll = function() {
    return $http.get('/api/posts.json').then(
      function successCallBack(response) {
        debugger
        angular.copy(response.data, obj.posts);
      },function errorCallBack(response) {
        // error message
      });
  };

改变

  obj.getAll = function() {
    return $http.get('/api/posts.json' , { headers: { 'Cache-Control' : 'no-cache' } }).then(
      function successCallBack(response) {
        angular.copy(response.data, obj.posts);
      },function errorCallBack(response) {
        // error message
      });
  };