AngularJS: Directive to controller communication: $(http).get(...).success is not a function

Question

I am trying to send data from factory to a controller but I get the following error:

$(http).get(...).success is not a function

Factory code:

app.factory('sportsFactory', ['$http', function($http) {
  return $http.get('data/sports.json')
    .success(function(data) {
      return data;
    })
    .error(function(err) {
      return err;
    });
}]);

Controller code:

app.controller('NavbarController',['$scope', 'sportsFactory', 
    function($scope, sportsFactory){
       sportsFactory.success(function(data){
          $scope.sports = data;
       });
}]);

If I pass a data without using $http it works!

Possible duplicate of [$http.get(...).success is not a function](http://stackoverflow.com/questions/41169385/http-get-success-is-not-a-function) — mehulmpt, Mar 08 '17 at 13:30
@EddyG Which version of angular you are using?. If you are using angular 1.6 `.success`, `.error` methods are deprecated — Gangadhar Jannu, Mar 08 '17 at 13:48

score 0 · Answer 1 · answered Mar 08 '17 at 13:31

Change your factory code just return the http promise, and handle it in your controller.

app.factory('sportsFactory', ['$http', function($http) {
  return $http.get('data/sports.json')
}]);

If you return a promise from the service, you can handle both success and error callbacks in your controller.

Your controller will be,

app.controller('NavbarController',['$scope', 'sportsFactory', 
    function($scope, sportsFactory){
       sportsFactory.then(function(data) {
            $scope.sports = data;
    })
    .error(function(err) {
      console.log(err);
    });
}]);

Use, then instead if success since success is deprecated in the latest versions.

score 0 · Answer 2 · answered Mar 08 '17 at 13:32

app.factory('sportsFactory', ['$http', function($http) {
  return $http.get('data/sports.json')
}]);

and in controller

app.controller('NavbarController',['$scope', 'sportsFactory', 
    function($scope, sportsFactory){
       sportsFactory.then(function(data){
          $scope.sports = data;
       });
}]);

score 0 · Accepted Answer · answered Mar 08 '17 at 13:35

it is better to create a factory method instead of returning one http request, because that way you can use same factory for several occasions like different http requests for example. But in here this factory only usable for this http request only. So create a function and call that method inside controller.

app.factory('sportsFactory', ['$http', function($http) {
    return {
        sendReq: function() {
            return $http.get('data/sports.json')
        }
    }
}]);

Note that you don't have to return the success inside the factory since the controller handling the response/promise.

call sendReq method from the controller like this

app.controller('NavbarController', ['$scope', 'sportsFactory',
    function($scope, sportsFactory) {
        sportsFactory.sendReq().success(function(data) {
            $scope.sports = data;
        });
    }
]);

Note that success is not available since angular 1.6. so beware of your version. if its a latest version use then instead of success like this

app.controller('NavbarController', ['$scope', 'sportsFactory',
        function($scope, sportsFactory) {
            sportsFactory.sendReq().then(function(response) {
                $scope.sports = response.data; // data comes under data property in then 
            });
        }
    ]);

AngularJS: Directive to controller communication: $(http).get(...).success is not a function

3 Answers3