AngularJS 中的嵌套模块

Question

我有 2 个不同的 AngularJs 模块：一个 widgetContainer 和一个 widget。

小部件可以作为独立的应用程序显示，也可以包含在 widgetContainer 中。一个 widgetContainer 包含 0-N 个小部件。

如果我尝试将小部件模块引导到 widgetContainer 中，angular 会抛出以下错误：

Error: [ng:btstrpd] App already bootstrapped with this element '<div id="childApp">' http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B

我在 this plunk

中重现了这个错误

<div id="parentApp">
<div ng-controller="MainParentCtrl">
  Hello {{name}} !
  <div id="childApp">
    <div ng-controller="MainChildCtrl">
      Hello {{childName}} !
    </div>
  </div>
</div>

编辑：

使用依赖注入有效解决问题。

现在，我需要从指令加载小部件。

parentApp.directive('widget', [function() {
  return {
    restrict: 'E',
    link: function($scope, $element, $attr) {

      var div = document.createElement('div');
      div.setAttribute("ng-controller", "MainChildCtrl");
      div.innerHTML = 'Hello {{childName}} !';
      $element.append(angular.element(div));

    }
  };
}]);

创建了div但是childApp模块没有加载进去。我更新了 plunker

Answer 1

要达到预期效果，请使用以下

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('parentApp'), ['parentApp','childApp']);

});

http://plnkr.co/edit/4oGw5ROo80OCtURYMVa3?p=preview

手册bootstrap的语法如下，与元素上控制器的使用无关

angular.bootstrap(element, [modules]);

Answer 2

不要尝试 bootstrap 这两个模块。而是使用依赖注入。您只在 html 中声明一个模块，然后使用 angular 代码使该模块依赖于另一个模块。看这里：https://docs.angularjs.org/guide/concepts#module

这是您更新的 plunkr：http://plnkr.co/edit/DJvzpCoxLRhyBl77S27k?p=preview

HTML:

<body>
  <div id="childApp">
    <div ng-controller="MainParentCtrl">
      Hello {{name}} !
      <div>
        <div ng-controller="MainChildCtrl">
          Hello {{childName}} !
        </div>
      </div>
    </div>
  </div>
</body>

AngularJS:

var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.childName = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});

AngularJS 中的嵌套模块

Nested modules in AngularJS

javascript

nested

angularjs

angularjs-module