Pass $http service in AngularJS to normal javascript function

Question

I am using Jquery widget inside a AngularJS directive.

App.directive('eff',['$http',function($http) {
    function link(scope, element, attrs) {
        $('#Widget').charts(
            getWidget(),
            function (chart) {
                // generate chart widget...
            }
        });
    }
    return {
        restrict: 'E',
        link: link
    };
}]);

// Normal JS function 
function getWidget(){
    // return widget data
}

Now I want to use the $http service form AngularJS inside getWidget function to load data from server.

Is it possible to pass the $http service object to getWidget method and load data?

Even if, the function couldn't return data fetched from a remote server synchronously. Though check the Angular docs for inject. — Aurelia
– Aurelia, Commented Aug 25, 2016 at 8:11
why do you need to do that, why you cant keep that function in angular scope.. ?? — harishr
– harishr, Commented Aug 25, 2016 at 8:16
@entre I did not understand what you just asked clearly .Did you mean that to bind the function to AngularJS Application('App')? Like App.getWidget(//code here) — shamika Dharmasiri
– shamika Dharmasiri, Commented Aug 25, 2016 at 8:28
I am asking you the purpose, why are you doing it.. passing $http to some function outside angular... if its outside angular, use jquery $.ajax or best would be to get it inside angular controller — harishr
– harishr, Commented Aug 25, 2016 at 10:14
So your question is "how do I pass an argument to a function"? — a better oliver
– a better oliver, Commented Aug 25, 2016 at 10:46

Jorawar Singh · Accepted Answer · 2016-08-25 08:34:02Z

0

Thanks to @Gant here is what you can try.

  function getWidget(){
   var $http = angular.injector(['ng']).get('$http');
    $http.get("path"); //
  }

edited Aug 25, 2016 at 8:34

answered Aug 25, 2016 at 8:08

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

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

5 Comments

Jorawar Singh Over a year ago

you mean you can use angular's http service outside angular app? why not post an answer then? maybe then i can also learn something new.

Jorawar Singh Over a year ago

@Gant read this and docs $inject Property Annotation To allow the minifiers to rename the function parameters and still be able to inject the right services, the function needs to be annotated with the $inject property. The $inject property is an array of service names to inject. also this answer

Aurelia Over a year ago

angular.injector(['ng']).get('$http');, I don't see why you wouldn't wrap it into a service though, so it'd be a bad answer. Wouldn't know about minification, moved on to ng2 and then React a while ago.

Jorawar Singh Over a year ago

WHAT op want Pass $http service in AngularJS to normal javascript function not a service

Jorawar Singh Over a year ago

thanks i tested your suggestion and yes it it possible, never did it before but still it's involving angular and i thought OP don't want to involve angular it all i will update my answer, again thanks @Gant

Nikhilesh Shivarathri · Accepted Answer · 2016-08-25 08:41:14Z

0

You can get the service like this. This will reduce the number of errors which may occur due to multiple angular instances

function getService(param) {
//use the root angular element id over here
  var applicationEl = angular.element('[YourRootElementReference]'),
      myInjector;
  param = '$http';
  if (applicationEl) {
    try {
            myInjector = applicationEl.injector(); //this will fetch you the injector
            if (myInjector) {
               return myInjector.get(param); // return the service
            }
        } catch (e) {
           return undefined;
        }
  }

edited Aug 25, 2016 at 8:41

answered Aug 25, 2016 at 8:32

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

Comments

Saneesh B · Accepted Answer · 2016-08-25 08:48:58Z

0

function doStuff(){
      angular.element(document).injector().invoke(function($compile , service1 , $http) {
          //do remainder of the stuff here        
      });
}

I hope this helps

answered Aug 25, 2016 at 8:48

Saneesh B

6125 silver badges14 bronze badges

Collectives™ on Stack Overflow

Pass $http service in AngularJS to normal javascript function

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related