$http is not a function in link functions of directive

Question

I am new to angular js and trying to use directives. I want to use $http in link function of directive. Below is my code

MyApp.directive('appItem', ['$http',function() { 
  return { 
    restrict: 'E', 
    scope: { 
      transaction: '=' 
    }, 
    templateUrl: 'js/directives/appItem.html' ,

    link: function($scope, $http, element, attrs) {
            $scope.process = function(trId) {
               $http({
                    method: 'PATCH',
                    url: 'http://myapp.domain.local/api/v1/items/'+trId+'.json'
                }).
               then(function successCallback(response) {
                console.log(response);
               });
            }
        }

  }
}]);

But it gives me error:

$http is not a function

score 7 · Accepted Answer · answered Jan 24 '16 at 16:47

MyApp.directive('appItem', ['$http',function($http) { 
  return { 
    restrict: 'E', 
    scope: { 
      transaction: '=' 
    }, 
    templateUrl: 'js/directives/appItem.html' ,

    link: function(scope,element, attrs) {
            scope.process = function(trId) {
               $http({
                    method: 'PATCH',
                    url: 'http://myapp.domain.local/api/v1/items/'+trId+'.json'
                }).
               then(function successCallback(response) {
                console.log(response);
               });
            }
        }

  }
}]);

score 1 · Answer 2 · answered Jan 24 '16 at 16:54

1

This is because link function is not dependency injected as the directive function.

Link function is given scope object, jQLite (jQuery) wrapped element, attributes object and optionally controller object in this specific order.

Directive function on the other hand is injected with dependencies, so placing $http there would make your code work as expected.

answered Jan 24 '16 at 16:54

Prashant

7,340
2
25
24

Do you mean like this ? MyApp.directive('appItem', [function($http) { ...}] – user3290349 Jan 24 '16 at 17:24
Exactly, and within the link function you can access $http. – Prashant Jan 24 '16 at 17:27

$http is not a function in link functions of directive

2 Answers2