Call angular function from plain JS

Question

I'm trying to integrate Fastsprings JS library into my Angular.js application. I have to embed Fastsprings library into my HTML head like:

<script id="fsc-api" src="..." data-popup-closed="onPopupClose" />

I've created a directive that uses document.createElement to build this script tag and add it to the document. My problem is that data-popup-closed contains the name of a callback function that is called if the fastspring popup gets closed. I tried to create this function inside my directive but that doesn't work because it only exists inside Angular scope then.

What is the best way to handle such situations? This is not a Fastspring specific question, this problem should always occur if you want to integrate a library which awaits a plain JS callback function.

Answer 1

Can you try to propagate "onPopupClose" function outside of the angulars scope? Do something like: window. onPopupClose = $scope. onPopupClose; in your angular app and then you can use this function outside.. just call window.onPopupClose()