如何：从服务到工厂，或其中没有$ 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>