CODEWITHSUNDEEP
javascriptangularjs
Sadeghbayan
Sadeghbayan

Reputation: 1163

refresh button not working in Angular

I want to have a button that refresh a page (request to http to load data) :

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

refresh button with Factory - - not working

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

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

Now when you delete some data and want to have theme back you should hit refresh button but it's not working .

working demo
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');
     })

} now it's working with $http

I want to do it with factory , but i can't handle this , Any advice ?

Update *****

Factory 

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

Upvotes: 1

Views: 341

Answers (2)

Sherali Turdiyev
Sherali Turdiyev

Reputation: 1743

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

    return {
        content: getContent
    }
})

in your controller:

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

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

Upvotes: 2

toskv
toskv

Reputation: 31632

You've got to tell your service to retrieve the data every time the content is requested.

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

Then in your controller you can do:

$scope.doRefresh = function() {
    Content.getContent().then(function(data) {

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

You can also just cache the data in your factory and return it without doing a request:

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

Careful though, changes done to the returned object will affect the originalData object.

Upvotes: 2

Related Questions