Angularjs 角度工厂与控制器_Angularjs_Controller

Angularjs 角度工厂与控制器

angularjs

Angularjs 角度工厂与控制器,angularjs,controller,Angularjs,Controller,我正在努力学习如何使用带控制器的工厂。我看到了一个例子： angular.module('flapperNews') .factory('posts', ['$http', function($http) { var o = { posts: [] } o.getPosts = function() { return $http.get('api/posts').success(function(data) { return d

我正在努力学习如何使用带控制器的工厂。我看到了一个例子：

angular.module('flapperNews')
  .factory('posts', ['$http', function($http) {
    var o = {
      posts: []
    }
    o.getPosts = function() {
      return $http.get('api/posts').success(function(data) {
        return data
      })
    };
    o.create = function(post) {
      return $http.post('api/posts', post).success(function(data) {
        o.posts.push(data);
      })
    };
    return o
  }])

当我输入console.log（o.getPosts（））时，它返回以下内容：

Promise {$$state: Object}
$$state
:
Object
pending
:
undefined
processScheduled
:
false
status
:
1
value
:
Object
config
:
Object
data
:
Array[6]
0
:
Object
_id
:
"576d4904f2aa867dadb7b286"
link
:
"aaa"
title
:
"nice weather in Australia"
upvotes
:
0
__proto__
:
Object
__defineGetter__
:
__defineGetter__()
__defineSetter__
:
__defineSetter__()
__lookupGetter__
:
__lookupGetter__()
__lookupSetter__
:
__lookupSetter__()
constructor
:
Object()
hasOwnProperty
:
hasOwnProperty()
isPrototypeOf
:

我想要的数据在数组[6]下，数组处于$$状态，有人知道这是什么，以及通常如何提取该数据吗？数据应该像这样传递到我的控制器：

 $stateProvider
   .state('home', {
       url: '/home',
       templateUrl: 'views/posts.html',
       controller: 'PostCtrl',
       controllerAs: 'posts',
       resolve: {
         postPromise: ['posts', function(posts) {
           console.log(posts.getPosts())
           return posts.getPosts();
         }]
       }
   });

注意：这是一个在线教程。如果有人能帮我解释一下，我会非常感激的，因为我是新来工厂的。当前的代码并没有返回到我的视图中，你能告诉我哪里出了问题吗

编辑/添加：这是控制器的实现。当我输入console.log（posts.posts）时，它返回一个空数组[]。有什么想法吗

 angular.module('flapperNews')



     .controller('PostCtrl', [
      '$scope','posts',
        function($scope,posts){

          $scope.posts=posts.posts;

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

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


    }]);

您如何在控制器中调用工厂的方法？您正在发出一个$http请求，该请求返回一个承诺

您可以在此处了解承诺：

简言之，您可以将承诺视为立即执行但在将来（而不是立即）返回数据的函数。您必须等到承诺“解决”后才能获取数据。这就是为什么在promise函数本身中包装任何需要promise数据的代码是好的

在控制器中应调用工厂方法（getPosts（））如下：

posts.getPosts().then(function(response){

    $scope.news = response.data;  <---here is where you get your data for your news.  You cant not declare **$scope.data** outside this promise function because you will miss the data.   

});

controller(['posts',function(posts){ ... });

$stateProvider
    .state('home',{
        url:'/home',
        templateUrl:'views/posts.html',
        controller:'PostCtrl',
        controllerAs:'posts',
        resolve:{
            postPromise: ['posts', function(posts){

                return posts.getPosts().then(function(response){

                     return response.data

                });

            }]
       }
    })

controller(['postPromise',function(postPromise){ ... });

$scope.news = postPromise;

您还可以通过以下方式获取路线中的数据：

posts.getPosts().then(function(response){ $scope.news = response.data; <---here is where you get your data for your news. You cant not declare **$scope.data** outside this promise function because you will miss the data. });

controller(['posts',function(posts){ ... });

$stateProvider .state('home',{ url:'/home', templateUrl:'views/posts.html', controller:'PostCtrl', controllerAs:'posts', resolve:{ postPromise: ['posts', function(posts){ return posts.getPosts().then(function(response){ return response.data }); }] } })

controller(['postPromise',function(postPromise){ ... });

$scope.news = postPromise;
然后在您的控制器中可以注入后处理，如下所示：

posts.getPosts().then(function(response){ $scope.news = response.data; <---here is where you get your data for your news. You cant not declare **$scope.data** outside this promise function because you will miss the data. });

controller(['posts',function(posts){ ... });

$stateProvider .state('home',{ url:'/home', templateUrl:'views/posts.html', controller:'PostCtrl', controllerAs:'posts', resolve:{ postPromise: ['posts', function(posts){ return posts.getPosts().then(function(response){ return response.data }); }] } })

controller(['postPromise',function(postPromise){ ... });

$scope.news = postPromise;
现在，您可以将数据分配给控制器中的变量，如下所示：

posts.getPosts().then(function(response){ $scope.news = response.data; <---here is where you get your data for your news. You cant not declare **$scope.data** outside this promise function because you will miss the data. });

controller(['posts',function(posts){ ... });

$stateProvider .state('home',{ url:'/home', templateUrl:'views/posts.html', controller:'PostCtrl', controllerAs:'posts', resolve:{ postPromise: ['posts', function(posts){ return posts.getPosts().then(function(response){ return response.data }); }] } })

controller(['postPromise',function(postPromise){ ... });

$scope.news = postPromise;

希望我回答了你的问题。如果我误解了，请提供更多详细信息或提供密码笔。
我在这里遵循tute：但postPromise没有“注入任何控制器”。因此，我猜教程还没有完成。抱歉，我解释错了，posts.getPosts（）没有在任何控制器中实现，它只存在于stateprovider路由下的resolve下，因此当页面加载时，posts会自动显示。我会试试你所有的建议，看看效果如何。谢谢你！！您必须将postPromise注入控制器。。。它有从您的邮政服务返回的数据。查看教程的“结束评论”部分，然后查看第3个和第4个紫色框，您将看到他正在控制器中注入帖子。post不是服务，而是包含路由解析中加载的数据的对象。：）我在上面添加了控制器代码-根据教程只注入了服务“posts”，而不是“postPromise”。这显然是为了使posts数据不会超出范围，其他控制器可以通过注入服务“posts”来使用数据。在代码解析中：{postPromise:['posts'，function（posts），第一个参数“posts”是什么？我读过其他文章，但这个参数总是被忽略。无论如何，我不认为我要将“posts”服务和postPromise都注入控制器。嘿，我注意到你的服务posts正在进行一些api调用。你有服务的url吗？你不能将数据存储到$http.post（'api/post'））或者从$http.get（'api/post）获取数据没有url。也许你不想共享url，但我只想确保你有一个。我还向你展示了如何在控制器和路由中使用该服务。请创建一个codepen.io笔并显示代码。当你要求检查教程并且教程从postsPromise切换到post mi时，很难回答这个问题dway.不，没有url，或者更确切地说，完整的url是不必要的，因为我的所有应用程序都是这样工作的。我也很高兴解决这个问题，因为我只需将解析功能ie postPromise注入我的控制器，就可以让它工作，但在有些情况下，在控制器中激活get可能比使用resolve更好，还在学习…再次感谢你的帮助！