Created
October 31, 2013 19:40
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); | |
} | |
} | |
}; | |
}]); |
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
Good job!
Couple things to think about though: