控制器的动态加载+angularjs中的工厂

Dynamic loading of controller + factory in angularjs

本文关键字：工厂 +angularjs 加载 动态 控制器      更新时间：2023-09-26

我正在开发angularjs应用程序，该应用程序应该可以使用"addins"进行扩展。在简化的情况下，addin只是一对js+html文件。每个插件都应该有一个或多个控制器和一个或更多工厂。以下是添加一个控制器和一个工厂的示例：

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>

使用互联网上广泛描述的技术动态加载插件并不是一个问题：通过向DOM添加JS脚本和HTML。在我尝试将对BasicAddinFactory的依赖注入BasicAddinController之前，一切都加载良好。之后，我在动态加载过程中出错：未知提供程序：addnProvider<-addin。

有趣的是，如果我不显式注入依赖项，那么一切都会加载得很好，我甚至可以通过使用上面示例中的注释代码从控制器（或从加载"addin"的父代码）访问工厂实例。但这很难看，我真的不想这样。

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

谢谢。

更新：示例plunk

这与Angular如何在幕后处理依赖关系有关。引导进程处理所有各种服务的注册。

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

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]);

Plunker的例子。

相关文章：