Skip to content

Instantly share code, notes, and snippets.

@neilsoult
Created October 31, 2013 19:40
Show Gist options
  • Save neilsoult/7255583 to your computer and use it in GitHub Desktop.
Save neilsoult/7255583 to your computer and use it in GitHub Desktop.
LazyLoad directive for loading external javascript for AngularJs. In this example, I use google maps' API as the external library being loaded
angular.module('testApp', []).
directive('lazyLoad', ['$window', '$q', function ($window, $q) {
function load_script() {
var s = document.createElement('script'); // use global document since Angular's $document is weak
s.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(s);
}
function lazyLoadApi(key) {
var deferred = $q.defer();
$window.initialize = function () {
deferred.resolve();
};
// thanks to Emil Stenström: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
if ($window.attachEvent) {
$window.attachEvent('onload', load_script);
} else {
$window.addEventListener('load', load_script, false);
}
return deferred.promise;
}
return {
restrict: 'E',
link: function (scope, element, attrs) { // function content is optional
// in this example, it shows how and when the promises are resolved
if ($window.google && $window.google.maps) {
console.log('gmaps already loaded');
} else {
lazyLoadApi().then(function () {
console.log('promise resolved');
if ($window.google && $window.google.maps) {
console.log('gmaps loaded');
} else {
console.log('gmaps not loaded');
}
}, function () {
console.log('promise rejected');
});
}
}
};
}]);
@raduolivas
Copy link

Sorry, i dont know if i get it but in my code function load_script() is never been reach!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment