javascript - 如何使用 AngularJS Controller 中 <script> 标签中包含的库

Question

我正在尝试在 Controller 中使用 d3 库。根据我的研究，方法之一是创建一个指令来为脚本附加所需的属性。但我仍然无法获得 d3 库所需的引用...

这是我的指令

angular.module('reportCtrl', [])

.directive('myCustomer', [function() {
    return {
        link: function(scope, element, attrs) {
            </script>
            angular.element('<script src="assets/lib/d3.js"></script>').append(element);
            angular.element('<script src="assets/lib/d3.promise.js"></script>').append(element);
        }
    }
}])

在我的 Controller 中，我使用 d3 引用。但我收到未定义的错误...我几乎需要等待这个脚本加载。但问题是，reportCtrl 位于另一个“mainController”内，我似乎无法始终如一地依赖应用程序的生命周期。

这是我的 Controller ...

.controller('reportController', function($scope, $http) {

    return $http.get('/api/admin/svc_spec_file_map')
    .success(dataset => {
        var container = d3.select('div.sheet').node();
}
});

Answer 1

第一种方法:

在 index.html 文件中定义脚本 src。您可以在 AngularJS 机制的脚本 src 之前执行此操作 - 模块、 Controller 等。

然后您就可以在其之后的所有脚本中访问 D3 变量。

第二种方法:

如果 d3 库有 AngularJS 的扩展，您可以将其作为依赖模块注入(inject)。你最好检查一下。

第三种方法:

使用 webpack，您可以将 D3 直接/延迟加载导入到您需要的指令中，但使用动态导入:

import('path/to/d3').then(d3 => {
  // do something with d3.default()
})

要点

您应该将其视为一个简单的 JS:如果您在初始化 AngularJS 框架之前定义了 D3 变量，则 D3 变量将在任何 AngularJS 应用程序中可用。