AngularJS中的嵌套模块

我有两个不同的AngularJs模块：一个widgetContainer和一个小部件。

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

如果我尝试将小部件模块升压到widgetContainer中，则角度抛出以下错误：

错误：[ng：btstrpd]应用已使用此元素'<div id =“ childApp”>'自举了http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id% 3D％22childApp％22％26gt％3B

我已经在这个小问题中重现了这个错误

<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模块未装入其中。我更新了我的矮人