Фильтрация данных из функции обратного вызова

Question

При использовании AngularJS я постоянно сталкиваюсь с проблемой того, как работать с асинхронными функциями и функциями обратного вызова. В нижеследующем, как я могу изменить PostsService.getPostBySlug, чтобы вернуть нужный пост?

сообщений службы

Website.factory('PostsService', 
[ '$filter', '$http', function(filter, $http) 
{ 
    // declare service 
    var PostsService = {}; 

Возврат всех сообщений (читает posts.json)

PostsService.getPosts = function(callback) 
    { 
     $http 
      .get('posts/posts.json') 
      .success(callback); 
    } 

Возврат один пост на основе его слизня

PostsService.getPostBySlug = function(slug, callback) 
    { 
     // declare post 
     var postForSlug = null; 
     console.log(postForSlug); // prints 'null' 

     // get all posts from service 
     var posts = PostsService.getPosts(function(data) 
     { 
      // all posts 
      var posts = data; 
      console.log(posts); // prints array of objects 

      // return all posts 
      return posts; 
     }); 

     // filter by slug 
     postForSlug = filter('filter') 
     ( 
      posts, 
      { 
       'slug': slug 
      } 
     ); 

     console.log(postForSlug); // prints 'undefined' 

     // return post for the given slug 
     return postForSlug; 
    } 

Возвращение службы

// return service 
    return PostsService; 

}]);  

---

Выход

null BlogController.js:26 
undefined BlogController.js:51 
[Object, Object] BlogController.js:33 

, который идет, чтобы показать, что порядок исполнения отличается от того, что я ожидал. Я знаю, что речь идет о асинхронном поведении и функции обратного вызова, но я действительно не знаю, как это исправить. Я продолжаю сталкиваться с этой проблемой, и было бы очень признательно, если бы кто-нибудь мог показать мне, как бороться с этим типом ситуации.

Answer 1

В то же время, вот что я хотел бы сделать.

WebSite.controller('BlogController',function(PostsService,$scope){ 
    PostService.getPosts() 
     .then(function(posts){ 
      $scope.posts = posts; 
     }); 
    PostService.getPostBySlug() 
     .then(function(post){ 
      $scope.postBySlug = post; 
     }); 

}); 

И ваш PostsService будет выглядеть следующим образом: (а прикованный обещание!)

PostsService.getPosts = function() 
{ 
    return $http.get('posts/posts.json').then(function(response){ 
     var data = response.data; 
     //look it over, is it what you want? 
     return data; 
    },function(errResponse){ 
     //handle error. 
    }); 
} 

Что касается фильтра. Они применяются в представлении с помощью оператора | с желаемыми параметрами в представлении, они не очень полезны вне шаблона.

Так Ваш getPostsBySlug должен выглядеть следующим образом:

PostsService.getPostBySlug = function(slug) 
{  
    return this.getPosts().then(function(posts){ 
     var post = {}; 
     angular.forEach(posts,function(value,index){ 
      if(value.slug == slug){ 
       post = value; 
      }    
     }); 
     return post; 
    }); 
} 

Надеется, что это помогает!

Answer 2

Я бы использовал обещания и обещание $ q Api для достижения этого.

см http://jsfiddle.net/6WuM3/

module.factory('PostsService', ['$filter', '$http', '$q', function (filter, $http, $q) { 
    // declare service 
    var PostsService = {}; 
    PostsService.getPosts = function() { 
     var defered = $q.defer(); 
     $http.get('posts/posts.json').then(function(response){ 
      defered.resolve(response.data); 
     }); 
     return defered.promise; 
    } 
    PostsService.getPostBySlug = function (slug) { 
     var defered = $q.defer(); 
     PostsService.getPosts().then(function(posts){ 
      var filtered = filter('filter')(posts, { 
       'slug': slug 
      }); 
      defered.resolve(filtered); 
     }); 
     return defered.promise; 
    } 
    return PostsService; 
}]) 

привет :)