AngularJS Factory HTTP Variable Only Usable in View

Question

So, my AngularJS Factory looks like:

.factory('getCategories', function($http) {
    return $http.get('api/categories');
})

Then, in the controller, I am getting the value like this:

getCategories.
    success(function(data) {
        $scope.category_data = data;
    });

In the view, I can access the scope variable via {{ category_data }}, and it works fine, returns JSON. But, when I try to access the variable in the controller, it just is always empty. I tried doing this:

$scope.category = $scope.category_data;

Then, after I had that, I would try to access the $scope.category variable in the view via {{ category }}, and it would be blank.

Any tips on an alternative to what I'm doing? Or what I have done wrong?

EDIT: Here is what my whole controller looks like.

.controller('ForumController', function($scope, $route, $routeParams, $location, $filter, getCategories) {  

getCategories.
    success(function(data) {
        $scope.category_data = data;
    });

$scope.category = $scope.category_data;

})

can you show us from which part of the controller you are trying to access the category_data variable? — swlim
– swlim, Commented Mar 22, 2015 at 20:19
Basically it's the same as what I have shown above. I have the getCategories.success() blah blah at the very top of the controller, then right under it I have $scope.category = $scope.category_data; — bin0
– bin0, Commented Mar 22, 2015 at 20:21
"when I try to access the variable in the controller, it just is always empty". Are you sure it is after the execution of the success handler? — Michel
– Michel, Commented Mar 22, 2015 at 20:30
Yeah it is, I've put the rest of my code in the success handler, and that works now, cause inside a category is topics and I had to get the category name to see which topics were in the category, and having that inside the success handler has fixed the problem. Not sure that's what I want to do, but it works for now at least. — bin0
– bin0, Commented Mar 22, 2015 at 20:32
Referring to Will's answer - the success callback is indeed async. So if you would like to access the variable, you'd have to do it in the success callback function. As you can see here in this example, there are two alerts, one outside and one inside the callback. Take note on the order of them going off. — swlim
– swlim, Commented Mar 22, 2015 at 20:38

Will · Accepted Answer · 2015-03-22 20:36:28Z

1

Because the success callback is asynchronous, it is being executed AFTER the assignment to $scope.category, so you're actually assigning a value of undefined to $scope.category.

You need to do something like this:

    .controller('ForumController', function($scope, $route, $routeParams, $location, $filter, getCategories) {  

    getCategories.
        success(function(data) {
            $scope.category = data;
        });
    })

answered Mar 22, 2015 at 20:36

Will

262 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Factory HTTP Variable Only Usable in View

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related