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服务的信息。

我的建议是根据这个重构：

＆＃13;

.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);
  };
});

＆＃13;

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

＆＃13;

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

2 个答案: