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">' .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
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/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
Share Improve this question edited Aug 22, 2016 at 8:25 oOnez asked Aug 19, 2016 at 16:50 oOnezoOnez 8872 gold badges13 silver badges23 bronze badges 1- seems like you're trying to bootstrap same angular module twice from javascript with same element. Reference: docs.angularjs/error/ng/btstrpd – Gopinath Shiva Commented Aug 19, 2016 at 16:52
2 Answers
Reset to default 4Don'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/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']);
});
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]);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745183677a4615536.html
评论列表（0条）