Question

我想要一个刷新页面的按钮（请求http加载数据）：

http://plnkr.co/edit/Ol6iEoLp037ZHu0P40Wr?p=preview

使用工厂刷新按钮 - - 无法正常工作

  $scope.doRefresh = function() {
             Content.content.success(function(data){

               $scope.data = data.artists;
               console.log($scope.data);
               $scope.$broadcast('scroll.refreshComplete');
             });

现在，当您删除某些数据并想要回归主题时，您应该点击刷新按钮，但它不起作用。

工作演示
http://plnkr.co/edit/WHSEPxyQDi3YNkEP8irL?p=preview

   $scope.doRefresh = function() {


     $http.get("data.json")
     .success(function(data) {
        $scope.data = data.artists;
       console.log($scope.data);
       $scope.$broadcast('scroll.refreshComplete');
     })

} 现在它正在使用 $ http

我想用工厂做，但我不能处理这个，有什么建议吗？

更新 *****

工厂

app.factory('Content', function ($http) {
    return {
        content: $http.get('data.json')
    }
})

Answer 1

每次请求内容时，您都必须告诉您的服务检索数据。

app.factory('Content', function ($http, $q) {
  
    return {
        getContent: function() {
          var deferred = $q.defer();
          $http.get('data.json').succes(function(data) {
             deferred.resolve(data);        
          });
          return deferred.promise;
        }
    }
})

然后在你的控制器中你可以这样做：

$scope.doRefresh = function() {
    Content.getContent().then(function(data) {

      $scope.data = data.artists;
      console.log($scope.data);
      $scope.$broadcast('scroll.refreshComplete');
    });

您也可以在工厂中缓存数据并在不执行请求的情况下将其返回：

app.factory('Content', function($http, $q, $timeout) {
  var originalData;

  return {
    getContent: function() {
      var deferred = $q.defer();
      if (!originalData) {
        $http.get('data.json').succes(function(data) {
          originalData = data;
          deferred.resolve(data);
        });
      } else {
        /// gonna use timeout to simulate async behaviour -- kinda hacky but it makes for a pretty interface
        $timeout(function() {
          defered.resolve(originalData);
        }, 0);

      }

      return deferred.promise;
    }
  }
})

但是要小心，对返回的对象所做的更改将影响originalData对象。

Answer 2

app.factory('Content', function ($http) {
    function getContent(onSuccess) {
        $http.get('data.json').success(function (data) {
            if (onSuccess) {
                onSuccess(data)
            }
        }
    }

    return {
        content: getContent
    }
})

在您的控制器中：

$scope.doRefresh = function () {
    Content.content(function (data) {

        $scope.data = data.artists;
        console.log($scope.data);
        $scope.$broadcast('scroll.refreshComplete');
    });
};

刷新按钮在Angular中不起作用

2 个答案: