1

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.

2
  • 1
    create a factory or service with the appropriate function Commented Apr 3, 2015 at 19:36
  • are you planning to make the function globally available? Commented Apr 3, 2015 at 20:18

2 Answers 2

1

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.

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

2 Comments

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.
I need to have my function available on every page of my angularJS app(which in turn is loaded by my WPF app)
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){}
}
})

1 Comment

How do I then make this function available on a page?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.