Scope of Datas not updating after a $http AngularJS

Question

I can't understand why it does not update the $scope.user_free_status when I set a user free but when I unset the parameter it works perfectly. I need to reload page in one case and not the other... The datas fetched are stored in the localstorage.

Here is the code:

    .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'InitialCtrl',
    resolve: {
      theUserFreeStatus: function(DataService) {
        return DataService.getUserFreeStatus();
      }
    }
  })

Controller:

.controller('InitialCtrl', function($scope, $state, DataService ,FreeService, SharedService, theUserFreeStatus) {
// Showing set free but not unset or not
  if (FreeService.isSetFree()) {
    $scope.showSetFree    = false;
    $scope.showUnSetFree  = true;
  } else {
    $scope.showSetFree    = true;
    $scope.showUnSetFree  = true;
  }

  // Show the Free status set when arriving on page/app
  $scope.user_free_status = theUserFreeStatus;
  // Set user as Free
  $scope.setFree = function(activity, tags) {
    FreeService.setFree(activity, tags).success(function() {
      console.log($scope.user_free_status);
      $scope.user_free_status = DataService.getUserFreeStatus();
      console.log($scope.user_free_status);
      $scope.showSetFree    = false;
      $scope.showUnSetFree  = true;
      SharedService.goHome();
    })
  }  

  //// Free status unset
  $scope.unsetFree = function() {
    FreeService.unsetFree().success(function() {
      $scope.user_free_status = [];
      $scope.showSetFree    = true;
      $scope.showUnSetFree  = false;
      SharedService.goHome();
    });
  };
})

The services:

.factory('FreeService', function(WebService, $localstorage, $ionicPopup, DataService, $sanitize, CSRF_TOKEN) {
    var cacheFreeStatus = function(free_status) {
        $localstorage.setObject('user_free_status', free_status)
    };
    var uncacheFreeStatus = function() {
        $localstorage.unset('user_free_status')
    }
    return {
        setFree: function(activity, tags) {
            var status  = { SOME STUFF BLABLABLA };
            var setFree = WebService.post('setstatus/', sanitizeStatus(status));
            setFree.success(function(response) {
                console.log('available' + response.flash);
                cacheFreeStatus(response.status_response);
            })
            setFree.error(freeError)
            return setFree;
        },
        unsetFree: function() {
            var details  = {OTHER STUFF};
            var unsetFree = WebService.post('unsetstatus/', details);
            unsetFree.success(function(response) {
                console.log('unset ' + response.flash);
                uncacheFreeStatus(response.status_response);
            })
            unsetFree.error(freeError)
            return unsetFree;

        },
        isSetFree: function() {
            return $localstorage.get('user_free_status');
        }
    }
})
.service('DataService', function($q, $localstorage) {
  return {
    activities: $localstorage.getObject('activities'),
    getActivities: function() {
        return this.activities;
    },
    user_free_status: $localstorage.getObject('user_free_status'),
    getUserFreeStatus: function() {
        return this.user_free_status;
    }
  }
})
 * Local Storage Service
 ------------------------------------------------------*/
.factory('$localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    unset: function(key) {
      localStorage.removeItem(key);
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}])

When setting the user's status, the console returns that the $http call worked but an empty array for the $scope variable I try to set. Once I reload the page I can see the updates displayed. If I unset the user's status, the $scope is properly updated without need to reload the page. The Webservice is just the $http call.

What am I missing here to have the $scope.user_free_status updated correctly without having to reload the page??

Thanks for your time!

Rahul Ravindran · Accepted Answer · 2015-01-28 09:48:08Z

1

Your data service is injected as service but you have not appended the functions to this.rather you have returned it as part of literal like u do in factory

answered Jan 28, 2015 at 9:48

Rahul Ravindran

3183 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

commandantp Over a year ago

thanks for your input. What would you suggest doing? should I just write this.getUserFreeStatus

Rahul Ravindran Over a year ago

Yep..just use this.functionname and dont need to return any object.or if u wish to not change ur code u can change it to be a factory instead of service and it would be just fine

commandantp Over a year ago

thanks. Is there a reason to want to use service over factory? I feel like the result is the same but factory is almost easier to write...

Rahul Ravindran Over a year ago

My personal view on this is..if u want to expose an api which mostly (not limited to)deals with talking to http CRUD services then its easier to use a service. When u seem to be in need of creating a thing (resembling a java bean) you would create it through a factory.this is entirely my opinion though.logically they both give u similar results

commandantp Over a year ago

Thank you for your input :-) I've had a hard time understanding which one to use when since you can do the same with both. I put up a codepen link here for the reworked service. I haven't been able to test it yet but does this look correct now?

|

Collectives™ on Stack Overflow

Scope of Datas not updating after a $http AngularJS

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related