【问题标题】：How to load angularjs directive use $injector如何使用 $injector 加载 angularjs 指令
【发布时间】：2014-12-02 15:17:11
【问题描述】：

我正在尝试使用来自 angular.injector 加载的其他模块的指令，但 Angular 无法理解 other_module 中的指令。
在我的主文件中，我声明了我的模块。

  angular.module('blockApp', []).directive('', []);

在第二个文件中，我尝试添加 angularCharts 作为依赖项：

  var otherBlock = angular.module('blockApp');
  otherBlock.run(function() {
      angular.injector(['ng', 'angularCharts']);
  });

然后我使用angularCharts 的指令，但 angularjs 无法识别它们。我知道我们应该在声明模块时添加依赖模块，但这是特殊情况。

【问题讨论】：

你可以得到它。你需要get它。 angular.injector(['ng', 'other_module']).get('directiveNameDirective'); 带有“指令”的 postFix 指令名称
感谢 PSL，但它得到了 Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- acChartDirective。就我而言，您的建议是angular.injector(['ng', 'angularCharts']).get('acChartDirective');
@PSL angular.injector(['ng','other_module']).get('directiveNameDirectirve) 调用 other_module.directive('directiveName, function() {}) 但 angular 仍然不理解 directiveName。我认为我们仍然需要将directiveName 注册到角度...

标签： angularjs angularjs-injector

【解决方案1】：

这是一个 plnkr http://plnkr.co/edit/Q5oD65wSvBAemf5BCDL7?p=preview

在这种情况下，您可以使用 $compile（您仍然需要示例中的 $scope，但我猜 $compile 几乎可以回答您的问题），

    var $compile = chartsInjector.get("$compile");
    console.log("$compile=",$compile);

    var chartsDirective = $compile("<div charts></div>");
    console.log(chartsDirective);

...

  var blockapp = angular.module('blockApp', []); 
  blockapp.run(function(){
    // create a new injector
    var chartsInjector = angular.injector(['ng', 'angularCharts']);
    console.log("chartsInjector=",chartsInjector);

    var $compile = chartsInjector.get("$compile");
    console.log("$compile=",$compile);

    var chartsDirective = $compile("<div charts></div>");
    console.log(chartsDirective);
  })

请注意，您将在此处创建多个注入器。

注入器 1) 由 ng-app 创建

<body ng-app="blockApp">

由 angular.injector() 创建的注入器 2)

var chartsInjector = angular.injector(['ng', 'angularCharts']);

整个代码

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script type="text/javascript">
      // creating the angularcharts
      angular.module('angularCharts', []).directive('charts', function(){
        return function(){}
      }); 

      // creating blockapp
      angular.module('blockApp', []).directive('', []); 

      // retrieving the created blockapp
      // NOTE! ng-app will create a new injector for blockapp 
      var blockapp = angular.module('blockApp', []); 
      blockapp.run(function(){
        // create a new injector
        var chartsInjector = angular.injector(['ng', 'angularCharts']);
        console.log("chartsInjector=",chartsInjector);

        var $compile = chartsInjector.get("$compile");
        console.log("$compile=",$compile);

        var chartsDirective = $compile("<div charts></div>");
        console.log(chartsDirective);
      })

    </script>
  </head>

  <body ng-app="blockApp">

  </body>

</html>

plnkr http://plnkr.co/edit/Q5oD65wSvBAemf5BCDL7?p=preview

【讨论】：

感谢 Noypi，您的解决方案可以解决我的问题。 angularjs有什么办法可以从模板自动编译charts而不是使用$compile？另外你为什么知道$injector.get 可以得到$compile，我以为它只能从模块中获取服务？再次感谢:)
很高兴能帮上忙。如果打开“docs.angularjs.org/api”，左侧是“ng”模块提供的默认服务。这些服务应该可用。当我在指令的定义对象中尝试“模板”参数时，我放置在那里的指令在指令被编译时被编译。
啊是的，还有一个$templateCache服务，检查一下...docs.angularjs.org/api/ng/service/$templateCache