如何从服务到工厂或者没有$ scope的服务？

Question

我有一个Angular应用程序，我正在显示WP帐户的帖子，我在服务中使用$scope，但根据一些文章，将$scope放入服务中不是一种正确的方式。

也有人问我做一个工厂，而不是。

我试图不使用$scope并创建一个工厂，但我的应用程序一旦我尝试失败。

这里是一个Plunker我重新创建了我的应用程序的完整操作。代码

而且这儿的一部分，你将在Plunker看到

.controller('NewsCtrl', function($scope, 
           FreshlyPressed, $stateParams) { 
    $scope.posts = []; 
    $scope.doRefresh = function() { 
    $scope.posts = FreshlyPressed.getBlogs($scope); 
    $scope.$broadcast('scroll.refreshComplete'); 
    } 
    $scope.doRefresh(); 
}) 

.service('FreshlyPressed', function($http) { 
    return { 
    getBlogs: function($scope) { 
     $scope.postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK'; 
     $http.jsonp($scope.postsURL).success(function(data, status, headers, config) { 
     $scope.posts = data; 
     console.log(angular.toJson($scope.posts, 'pretty')); 
     }).error(function(data, status_headers, config) { 
      console.log('error') 
     }); 
    }, 
    getPostById: function(postId) { 
     var url ='http://urbanetradio.com/wp-json/posts/'+ postId; 
     return $http.get(url); 
    } 
    } 
}) 

.controller('PostDetailCtrl', function($scope, $stateParams, $sce, FreshlyPressed) { 

    var postId = $stateParams.postId, 

    FreshlyPressed.getPostById(postId).success(function(response){ 
     console.log(response); 
     $scope.post = response; 
    }); 

    // Marks src as safe 
    $scope.trustSrc = function(src) { 
     return $sce.trustAsHtml(src); 
    }; 
}); 

所以你可以看到.service('FreshlyPressed')，这是我想作为一个工厂干什么用的，或者可能是相同的服务，但没有的使用$scope

Answer 1

的PostDetailCtrl和FreshlyPressed.getPostById才是正道。以下是你如何修改getBlogs和NewsCtrl：

.controller('NewsCtrl', function($scope, FreshlyPressed, $stateParams) { 
    $scope.posts = []; 
    $scope.doRefresh = function() { 
    FreshlyPressed.getBlogs().success(function(blogs) { 
     $scope.posts = blogs; 
     $scope.$broadcast('scroll.refreshComplete'); 
    }).error(function() { 
     console.log('error'); 
    }); 
    } 
    $scope.doRefresh(); 
}) 


.service('FreshlyPressed', function($http) { 
    return { 
    getBlogs: function() { 
     return $http.jsonp('http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK'); 
    }, 
    getPostById: function(postId) { 
     var url ='http://urbanetradio.com/wp-json/posts/'+ postId; 
     return $http.get(url); 
    } 
    } 
}) 

Answer 2

我认为你不明白你为什么要创建工厂，所以我会开始描述工厂的职位。

工厂是应用程序的一部分，它应该为您获取信息，例如服务器端帮助程序类。它不应该知道它是否适用于其他工厂，提供商或控制器。例如，在这里您应该创建一个返回Promise *或Web服务信息的函数。

我对你的建议是根据该重构：

.controller('NewsCtrl', function($scope, 
 
           $ionicLoading, 
 
           FreshlyPressed, $stateParams) { 
 
    $scope.posts = []; 
 
    $scope.doRefresh = function() { 
 
    FreshlyPressed.getBlogs().success(function(res){ 
 
     $scope.posts=angular.toJson(res); 
 
    }); 
 
    
 
    /*Your'e here broadcasting to no one. you should broadcast to $rootScope.. so all the inheritant scopes will get the messege.. and i can't see here the listening event either.*/ 
 
    $scope.$broadcast('scroll.refreshComplete'); 
 
    } 
 
    /*Initializing the posts*/ 
 
    $scope.doRefresh(); 
 
}) 
 

 
.service('FreshlyPressed', function($http) { 
 
    return { 
 
    getBlogs: function() { 
 
     var postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK'; 
 
     return $http.jsonp(postsURL); 
 
    }, 
 
    getPostById: function(postId) { 
 
     var url ='http://urbanetradio.com/wp-json/posts/'+ postId; 
 
     return $http.get(url); 
 
    } 
 
    } 
 
}) 
 

 
.controller('PostDetailCtrl', function($scope, $stateParams, $sce, FreshlyPressed) { 
 
    var postId = $stateParams.postId, 
 
    siteId = $stateParams.siteId; 
 
    console.log($stateParams); 
 

 
    FreshlyPressed.getPostById(postId).success(function(response){ 
 
    console.log(response); 
 
    $scope.post = response; 
 
    }); 
 

 
    // Marks src as safe 
 
    $scope.trustSrc = function(src) { 
 
    return $sce.trustAsHtml(src); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>