Question

我正在尝试使用本教程https://thinkster.io/tutorials/mean-stack/wiring-everything-up来学习角度，并且我遇到了打开应用程序遇到调用/ posts url的无限循环的障碍。我已经用邮递员检查了我的路线，他们按预期工作，所以我不确定为什么这不能正确解决。下面是'posts'服务，'mainCtrl'控制器和配置。有人可以看看，告诉我他们是否看到我的错误或者我是否需要提供更多的代码来帮助。谢谢。

服务

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

o.getAll = function() {
    return $http.get('/posts').success(function(data){
      angular.copy(data, o.posts);
    });
  };

return o;

}])

控制器

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
$scope.test = 'Hello world!';

$scope.posts = posts.posts;

$scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { return; }
    $scope.posts.push({
      title: $scope.title,
      link: $scope.link,
      upvotes: 0,
      comments: [
        {author: 'Joe', body: 'Cool post!', upvotes: 0},
        {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
      ]
    });
    $scope.title='';
    $scope.link='';
}

$scope.incrementUpvotes = function(post) {
  post.upvotes += 1;
};

}]);

配置

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

$urlRouterProvider.otherwise('home');
}])

Answer 1

我将用一个部分对我有用的解决方案来解决这个问题。我说部分是因为我不再经历无限循环但是如果有人遇到这个问题而做教程，他们最终会遇到一个新问题，点击提交会创建一个新帖子，但数据不存在。刷新后你会得到你想要的结果，但我还没有解决这个新问题。

无限循环的解决方案是在服务函数

中使用它

return $http.get('/posts').then(function(data){
        angular.copy(data.data, o.posts);
    });

教程要求的成功语法不起作用。

Angular-ui-router导致无限循环

1 个答案: