calling javascript function defined in html script tag from angular controller

Question

I have a.html that defines javascript function inside script tag. Since apparently xxx() is not inside bCtrl, does anyone know how to call xxx()? The point is I can't move function xxx to controller or directive because someone who does not know angular is in charge of this function.

a.html

<html ng-app="myApp">
    <div ng-controller="bCtrl">
    .....
    </div>
    <script>
        (function($) {
            $(function(){
                function xxx () {
                    // do something
                }
            });
        })(jQuery);
    </script>
</html>

bCtrl

angular
.module('myApp')
.controller('bCtrl', [
    '$scope',
    function ($scope) {
        // wanna call xxx() if possible
    }
]);

There's absolutely no way to call that function from anywhere but inside that inner closure where xxx is being defined. It's a scoping issue. — deceze
– deceze ♦, Commented Jul 6, 2017 at 8:54
This question and its answers may be useful. The basic problem you're having is the conflict between the Angular way and the jQuery way. Angular isn't just a library, it's a framework, an approach to building the page/app. Good luck! — T.J. Crowder
– T.J. Crowder, Commented Jul 6, 2017 at 8:56
the xxx function is like double private (function inside closure that is inside closure). You need to give a public reference (attach to window or another global reference) to call that function which is a bit hacky. — Volkan Seçkin Akbayır
– Volkan Seçkin Akbayır, Commented Jul 6, 2017 at 8:56

T.J. Crowder · Accepted Answer · 2017-07-06 08:54:31Z

1

The issue isn't that it's defined within a script tag, it's that it's defined within a function (the callback being passed to $). That means it's entirely private to that function. Unless something makes a reference to it available from outside that function, it's impossible to call it from outside the function.

One way you could make it possible would be to assign it to a global variable:

window.xxx = xxx;

...but in general, global variables are a solution of last resort.

Instead, perhaps you could move that function into a module (ideally, all the things being done in that non-Angular block), and inject a dependency on that module into your controller, and then call it that way.

answered Jul 6, 2017 at 8:54

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Collectives™ on Stack Overflow

calling javascript function defined in html script tag from angular controller

a.html

bCtrl

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

a.html

bCtrl

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related