Loading external scripts within angular html views

Question

I have signed up to a paid version of Polldaddy and was provided this script tag (minus the proper id).

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/0000000.js"></script>

This script has to be loaded within a div in a view of mine - and it is not working. Does angular have an issue with loading scripts within a view? Is it possible? If so, could you help me understand how to do it please?

Let me know if you need more info.

Thanks

Answer 1

You can't load a script inside an Angular app due the Angular script directive, so you need to create your own directive. Something like this:

function polldaddy() {
    var injectScript = function(element) {
        var scriptTag = angular.element(document.createElement('script'));
        scriptTag.attr('charset', 'utf-8');
        scriptTag.attr('src', 'http://static.polldaddy.com/p/0000000.js');
        element.append(scriptTag);
    };

    return {
        link: function(scope, element) {
            injectScript(element);
        }
    };
}

angular
    .module('myApp')
    .directive('polldaddy', polldaddy);

and then in your HTML:

<div polldaddy></div>