javascript - angularjs中 Controller +工厂的动态加载

Question

我正在开发应该可以使用“插件”扩展的 angularjs 应用程序。在简化的情况下，addin 只是一对 js+html 文件。每个插件应该有一个或多个 Controller 和一个或多个工厂。以下是添加一个 Controller 和一个工厂的示例:

JS:

angular.module('addins.basic', [])

angular.module('addins.basic').factory('BasicAddinFactory', [BasicAddinFactory]);

function BasicAddinFactory()
{
    var fact =
    {
        Invoke: function ()
        {
            console.log('BasicAddinFactory.Invoke');
        },
        GetClients: function ()
        {
            return ["aa", "bb"];
        }
    }

    return fact;
}

angular.module('addins.basic').controller('BasicAddinController', ['$scope', 'BasicAddinFactory', BasicAddinController]);

function BasicAddinController($scope, $injector, addin)
{
    //var injector = angular.injector(['ng', 'addins.basic'])
    //var addin = injector.get('BasicAddinFactory');

    $scope.expr = 'BasicAddinFactory: ' + addin.GetClients()[0];
}

HTML:

<div ng-controller="BasicAddinController">
    <input type="text" ng-model="expr">
    <span>{{ expr }}</span>
</div>

使用互联网上广泛描述的技术动态加载插件不是问题:通过将 JS 脚本和 HTML 添加到 DOM。在我尝试将对 BasicAddinFactory 的依赖项注入(inject) BasicAddinController 之前，一切都正常加载。这样做之后，我在动态加载期间遇到错误:Unknown provider: addinProvider <- addin.

有趣的是，如果我没有显式注入(inject)依赖项，一切都可以正常加载，我什至可以通过使用上面示例中的注释代码从 Controller (或从加载“插件”的父代码)访问工厂实例。但这很丑陋，我真的不想这样。

如果有人能指出我的错误所在，我将不胜感激。

谢谢。

更新:Sample plunk

Answer 1

这与 Angular 在幕后实际处理依赖项的方式有关。 bootstrap process 处理注册所有各种服务。

当您动态添加模块时，您需要自己注册这些新模块。一种方法是为每种类型的服务提供全局可用的注册函数，如下所示:

app.config(['$controllerProvider',
  '$compileProvider', '$filterProvider', '$provide',
  function($controllerProvider,
    $compileProvider, $filterProvider, $provide) {

    app.register = {
      controller: $controllerProvider.register,
      directive: $compileProvider.directive,
      filter: $filterProvider.register,
      factory: $provide.factory,
      service: $provide.service
    };
  }
]);

然后您更改动态模块以像这样注册它们的服务:

app.register.factory('BasicAddinFactory', [BasicAddinFactory]);

A Plunker example.