How do I pass a reference to $http in AngularJS?

Question

I have following controller definition:

angular.module('myapp', [ 'ngRoute' ]).config(function($routeProvider,
$httpProvider) {

[...]
})
.controller('edit', function($scope, $http, $routeParams) {
    $scope.projectid = $routeParams.id;
    $scope.viewer = "undefined";
    $scope.mode = 'nothing';
    var projectid = $routeParams.id;
})
.directive('initCesium', function(){
    return {
        restrict: 'AEC',
        link: function(scope, element, attrs) {
            if (typeof Cesium !== "undefined") {
                startup(Cesium, scope);
            } else if (typeof require === "function") {
                require(["Cesium", "scope"], startup);
            }
        }
    }
});

I need to send a web service request in function startup. Therefore I need to pass $http to startup in 2 places:

startup(Cesium, scope);
require(["Cesium", "scope"], startup);

How can I do that?

how about .directive('initCesium', function($http){ ... and then startup(Cesium, scope, $http) or simply angular.element(document.body).injector().get('$http') — webduvet
– webduvet, Commented Aug 16, 2015 at 18:44

NiRUS · Accepted Answer · 2015-08-16 18:25:43Z

Ok its straight and simple.

Below is the working code i have created that illustrates how $http object can be accessed in the link function of your directive.

In your case you can apply the below logic to pass references to the functions you intend to access $http object.

Checkout the Js fiddle link

Javascript:

var app = angular.module('components', [])

    app.controller("MyCtrl", ["$scope","$http", function($scope, $http){        
        $scope.ctrl = "Works!"
        $scope.http = $http;
    }]);
    app.directive('helloWorld', function () {
        return {
            restrict: 'EC',            
            link:function(scope, elemnt, attrs){
                console.log("Directive");                                                        
                scope.http.post("/echo/json/", "json=%7B%22name%22%3A%22nirus%22%7D")
                .success(function(data, status) {
                    scope.name = data.name;
                   console.log(data.name)
                }).error(function (status) {
                    console.log("Error occured")
                });
            },            
            template: '<span>Hello {{name}} : it {{ctrl}}</span>'
        }
    })

angular.module('HelloApp', ['components'])

Html:

<!doctype html>
  <html ng-app="HelloApp">
   <body ng-controller="MyCtrl">
    <hello-world></hello-world>
   </body>
  </html>

In my link function i am able to access the http object.

Hope this helps you!

Collectives™ on Stack Overflow

How do I pass a reference to $http in AngularJS?

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