在 vanilla JavaScript 中動態載入 AngularJS 服務

你可以使用 AngularJS injector() 方法在 vanilla JavaScript 中載入 AngularJS 服務。檢索到呼叫 angular.element() 的每個 jqLit​​e 元素都有一個方法 injector()，可用於檢索注入器。

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

在上面的例子中，我們嘗試檢索包含 AngularJS 應用程式（ngAppElement）的根的 jqLit​​e 元素。為此，我們使用 angular.element() 方法，搜尋包含 ng-app 或 data-ng-app 屬性的 DOM 元素，如果不存在，我們將回退到 document 元素。我們使用 ngAppElement 來檢索注入器例項（使用 ngAppElement.injector()）。注入器例項用於檢查要注入的服務是否存在（使用 injector.has()），然後在 service 變數中載入服務（使用 injector.get()）。