javascript - AngularJS - 在模块依赖注入(inject)时加载 vendor 脚本

标签 javascript angularjs

我必须创建一个 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/

相关文章:

javascript - 在最初的 promise 解决之前进行 Protractor 测试

javascript - 隐藏和显示表单(Angular JS)

javascript - 平均应用程序 : Can't find theme in Angular material

javascript - 多个 Firebase 函数不起作用

javascript - Web 应用程序在全局范围内声明的全局变量

javascript - Firebase/AngularFire - 是否需要身份验证、Login.Logoff?

javascript - 悬停时jQuery显示框并在鼠标离开时隐藏

javascript - 如何在点击后更改图像?

javascript - 如何将一些模板应用于 AngularJS 中复选框和单选框的所有输入类型?

javascript - Angular : Control that fired ng-change