Call function in external library from Angular controller

Question

We have a script placed on our site that is used to generate pop-up's/modals.

The modal can be invoked by calling

ModalObject.Triggeronclick(someModalId)

However, I cannot call this function from the Angular controller (and I need access to data and logics within the controller, to trigger the call).

I have tried calling

window.ModalObject.Triggeronclick(someModalId) 

... but I get:

"TypeError: Cannot read property 'triggerOnclick' of undefined".

How can I call this function from my app controller?

Answer 1

If you insist on using your ModalObject instead of an angular specific modal resource, Then you should create a factory/service that returns $window.ModalObject - $window being the angular injected window object. Then you can inject that factory/service into your controller.

    app.factory('modalObject', ($window) => {
        return $window.ModalObject
    })

Assuming the ModalObject is available on the window object.

Then inject modalObject into your controller.

However, there are other options that are specifically angular modals:

• https://angular-ui.github.io/bootstrap/
• https://www.google.com/search?q=angular+modal+npm&oq=angular+mo&aqs=chrome.0.69i59j69i60j0j69i59j69i57j69i60.1372j0j7&sourceid=chrome&ie=UTF-8

Answer 2

You could try to add the resource to the index.html and access global variables with

(<any>window).document

where you would normally just call

document