我必须创建一个 AngularJS 模块,其中包含使用 moment.js 的指令和服务。
当模块作为依赖项注入(inject)时,有没有办法加载这个库?
目标是在应用程序将模块作为依赖项注入(inject)时加载 moment.js,并避免最终应用程序与 vendor 脚本之间的任何配对。
(我知道存在 Angular 矩,我对其他库也有类似的问题)
最佳答案
Angular 的注入(inject)器在首次注入(inject)时运行服务的工厂函数。您可以在那里加载外部脚本。
但是,当您使用该服务时,这不会“自由”地发生,因为脚本是异步加载的,因此您必须始终防止脚本尚未加载。
例如,您可以在服务的工厂函数中执行类似的操作:
.factory("foo", function($q) {
function loadScript(src) {
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
return script;
}
var loadPromise = $q(function(resolve) {
loadScript("foo.js").onload = function(){
resolve();
}
});
return {
load: function() {
return loadPromise;
},
doFoo: function() {
// TheFoo is the object created by foo.js
return TheFoo.doFoo();
}
};
});
然后,当您使用它时,例如在 Controller 中,您必须等待它加载:
.controller("MainCtrl", function($scope, foo){
// foo.doFoo(); <== this will fail because it has not yet loaded
foo.load().then(function(){
$scope.prop = foo.doFoo();
});
});
plunker用于说明
关于javascript - AngularJS - 在模块依赖注入(inject)时加载 vendor 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28617371/