Javascript AngularJS中的嵌套模块_Javascript_Angularjs_Nested_Angularjs Module

Javascript AngularJS中的嵌套模块

javascript angularjs

Javascript AngularJS中的嵌套模块,javascript,angularjs,nested,angularjs-module,Javascript,Angularjs,Nested,Angularjs Module,我有两个不同的AngularJs模块：一个widgetContainer和一个小部件小部件可以作为独立应用程序显示，也可以包含在widgetContainer中。widgetContainer包含0-N个小部件如果我尝试将小部件模块提升到widgetContainer中，则抛出以下错误：错误：[ng:btstrpd]应用程序已使用此元素“”启动我在一篇文章中重复了这个错误已创建div，但未在其中加载childApp模块。我已经更新了我的以达到预期的效果，请使用下面的 angular

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

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

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

错误：[ng:btstrpd]应用程序已使用此元素“”启动

我在一篇文章中重复了这个错误

已创建div，但未在其中加载childApp模块。

我已经更新了我的

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

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

});

手动引导的语法如下所示，与元素上控制器的使用无关

angular.bootstrap(element, [modules]);

不要试图引导这两个模块。而是使用依赖注入。在html中只声明一个模块，并使用角代码使该模块依赖于另一个模块。请看这里：

以下是您的最新plunkr：

HTML:

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

看起来您正试图使用相同的元素从javascript中两次引导相同的angular模块。参考：

angular.bootstrap(element, [modules]);

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

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