0

I am trying to load third party JavaScript library into my AngularJS component by using directive. Script is getting load on the page properly, but not working as expected. Means if you see the code inline.js, they have added one function to window.OOo, by somehow that function is not getting added to window.OOo.

If I add the same scripts into index.html by using scripts tag, everything is working fine.

But, I do not want to load this script on main page, because it is going to be use by only one component.

Please see the code below.

View

<div>
    <my-directive></my-directive>
</div>

Directive

@Directive({
    appName: "ao.app",
    injectableName: "myDirective",
    ngInjectables: ["$compile", "$window"]
})
class Survey {
    constructor(private $compile: ng.ICompileService, private $window: ng.IWindowService) {
    }
    restrict = "E";

    link(scope, elm, attrs) {
        var script = document.createElement("script");
        script.src = "./scripts/vendor/scripts/engine.min.js";
        elm.append(this.$compile(script)(scope));
        var script2 = document.createElement("script");
        script2.src = "./scripts//vendor/scripts/inline.js";
        elm.append(this.$compile(script2)(scope));
    }
}
export = Survey;

inline.js

(function(w, o) {
    'use strict';
    var Init = function() {
        o.launch = function(e) {
            var evt = e || window.event;
        };
    };
    o.addEventListener(w, 'load', Init, false);
})(window, OOo);

Any help will be appreciated. Thanks in advance :)

rajk
  • 221
  • 3
  • 19

1 Answers1

-1

It should work without compile since it is javascript reference.Remove $compile and check. Check here for more details.

Sathyaraj Palanisamy
  • 589
  • 1
  • 9
  • 19