I do not think that $scope is known in your js external library - so that you need to init it first.
function foo( val) { //will define foo as function
console.warn(val);
};
//====================================================
function setMyScope(scope) { //will define foo in scope
scope.foo=foo;//sets foo in scope
};
console.log("----loaded library externalJS.js----");
I also check and improved the load lib to async call where the call back fucntion will fire for both js and css. Only one argument is used and it will check the extension so the usage:
//---------------Loading the API-----------------------
$scope.loadScriptEventCallback = function (fname) {
var ext =/^.+\.([^.]+)$/.exec(fname);
if(ext == null) {console.error("error checking extension!");return;}
return new Promise((resolve, reject) => {
if(ext[1]=='js')
{ console.info("lib:"+ext[0]+" is javascript");
var head = document.head || document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.async = true; script.onload = resolve;
script.onerror = reject; script.type = 'text/javascript';
script.src=fname; head.appendChild(script); }
else if(ext[1]=='css'){ console.info("lib:"+ext[0]+" is style CSS");
var head = document.head || document.getElementsByTagName('head')[0],
link = document.createElement('link');
link.async = true; link.onload = resolve;
link.onerror = reject; link.type = 'text/css';link.rel = 'stylesheet';
link.href = fname;
link.media = 'all';
head.appendChild(link);
}//else
});//promise
}
//////////////////////////////////////////
$scope.myModuleLoad= function() {
// try to load js
$scope.loadScriptEventCallback("app/resources/Uploaded/js/externalJS.js").then(
function() { console.log("eloadScriptEventCallback loaded js lib successfully") ;
setMyScope($scope); }, //resolved
function() { console.log("error for when loading the js lib module");} ); //reject
//try to load css
$scope.loadScriptEventCallback("app/resources/Uploaded/js/test.css").then(
function() { console.log("eloadScriptEventCallback loaded css lib successfully");}, //resolved
function() { console.log("error for when loading the css lib module");} ); //reject
}
//====================================================================================
$scope.myModuleLoad(); //LOAD here externalJS.js and test.css form upload/js folde
so when I test it :
so here we can see the callback function in then block when loading was complete
Another approach could be to use $watch construct where we can check if the definiton is already available and then call a function - some thing like this :
$scope.$watch('foo', function (newValue, oldValue, scope) {
if(newValue!=null) foo("now is ext module loaded and foo is defined");
})
I will attach here the modified project
