Nested modules in AngularJS

2019-07-11 04:52发布

站内问答 / JavaScript
1541 2 5

I Have 2 differents AngularJs modules : a widgetContainer and a widget.

A widget can be displayed as an independant application or be included into a widgetContainer. A widgetContainer contains 0-N widgets.

If i try to boostrap the widget module into the widgetContainer, angular throw the following error :

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

I have reproduce this error in this plunk

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

EDIT :

Using Dependency injection solve the problem efficiently.

Now, I need to load the widget from a directive.

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

    }
  };
}]);

The div is created but the childApp module is not loaded inside. I have updated my plunker

2条回答
我欲成王，谁敢阻挡
2楼-- · 2019-07-11 05:14

To achieve expected result, use below 

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

});

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

Syntax for manual bootstrap is as below irrespective of usage of controllers on elements

angular.bootstrap(element, [modules]);
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-07-11 05:17

Don't try to bootstrap both modules. Instead use dependency injection. You only declare one module in your html and you make that module depend upon the other module using angular code. See here: https://docs.angularjs.org/guide/concepts#module

Here's your updated 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']);
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)