How to expose public function in AngularJS

Question

I am writing an app in AngularJS. I need to expose a function that will be called by an outside library.

I need to have my third party library call

executeFunction(param)

and have my angular app respond accordingly.

My first thought was to create a directive that I could apply to a page that would tell the page to listen for this event(function) to be called but I can't seem to wrap my head around how to do this.

create a factory or service with the appropriate function – ganders Apr 03 '15 at 19:36 — ganders, Apr 03 '15 at 19:36
are you planning to make the function globally available? – JackNova Apr 03 '15 at 20:18 — JackNova, Apr 03 '15 at 20:18

score 1 · Answer 1 · edited May 23 '17 at 11:59

If by "outside library" you mean pure javascript/jquery, there are a number of answers to this question. They all propose the same solution, namely that the Controller is exposed via the DOM element id, see the following links:

Call Angular Function with Jquery

AngularJS. How to call controller function from outside of controller component

Creating a factory or service will not help as you have no way to inject/expose an angular service to a jquery function.

Rather than the above solutions, I would suggest trying to write an event handler. You could create an angularjs directive with a link function that registers a jquery custom event listener. The directive would contain a nested controller to handler the required logic. Your jquery/javascript code could then simply trigger the event (passing along any data required)

jQuery customer events:

https://learn.jquery.com/events/introduction-to-custom-events/

I think all of this is however, bad practice. I would recommend that you reconsider the design of what you are trying to accomplish.

In my scenario, I have a WPF app injecting JS into a page. The WPF app expects there to be a function on the page to call as such `wpfInput(value)` so I don't think there is anyway to get around the bad practice aspect. — stephen776, Apr 07 '15 at 15:25
I need to have my function available on every page of my angularJS app(which in turn is loaded by my WPF app) — stephen776, Apr 07 '15 at 17:35

score 0 · Answer 2 · answered Apr 03 '15 at 20:14

0

you can make an factory or service or even more robust solution will be to make ab complete module

angular.modue("myLib")
.factory("myLibFactory",function(){
return{
executeFunction :function(param){}
}
})

answered Apr 03 '15 at 20:14

A.B

20,110
3
37
71

How do I then make this function available on a page? – stephen776 Apr 07 '15 at 15:47

How to expose public function in AngularJS

2 Answers2