Как я могу использовать библиотеки, включенные в теги <script>из контроллера AngularJS

Question

Я пытаюсь использовать библиотеку 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);
        }
    }
}])

В моем контроллере я использую ссылку d3.Но я получаю неопределенную ошибку ... Мне почти нужно ждать загрузки этого скрипта.Но проблема в том, что reportCtrl находится внутри другого "mainController", и я не могу постоянно полагаться на жизненный цикл приложения.

Это мой контроллер ...

.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

Первый подход:

Определите сценарий src в файле index.html. Вы можете сделать это до сценария src механизма AngularJS - модулей, контроллеров и т. Д.

Тогда вы сможете получить доступ к переменной D3 во всех сценариях, которые идут после нее.

Второй подход:

Если библиотека d3 имеет расширение для AngularJS, вы можете внедрить его как зависимый модуль. Тебе лучше проверить это.

Третий подход:

с помощью веб-пакета вы можете импортировать D3 с прямой / отложенной загрузкой в ​​нужную вам директиву, но с использованием динамического импорта:

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

Ключевой момент

Вам следует подумать об этом как о простом JS: если вы определите переменную D3 до запуска платформы AngularJS, переменная D3 будет доступна в любом приложении AngularJS.

Answer 2

Странно, что вы загружаете эти сценарии из директивы, поскольку директивы можно добавлять и удалять из DOM.

Было бы разумнее загрузить их из службы:

app.service('d3Loader', function($rootElement,$q) {
    var promise;
    this.load = function() {
        promise = promise || loadD3();
        return promise;
    };
    function loadD3 () {
        var defer = $q.defer();
        var d3url = "//unpkg.com/d3/dist/d3.js"; 
        var s = document.createElement("script");
        s.onload = function(ev) {
          defer.resolve(d3);
        };
        s.onerror = function(ev) {
          defer.reject(ev)
        };
        s.src=d3url;
        $rootElement[0].appendChild(s);
        return defer.promise;
    }
})

Использование:

d3Loader.load().then(function(d3) {
    console.log(d3);
});

DEMO на PLNKR