如何從服務到工廠或者沒有$ 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>