javascript - template - Módulos anidados en AngularJS
make filter angularjs (2)
Tengo 2 diferentes módulos AngularJs: un widgetContainer y un widget.
Un widget puede mostrarse como una aplicación independiente o incluirse en un widgetContainer. Un widgetContainer contiene widgets 0-N.
Si intento boostrap el módulo de widgets en el widgetContainer, angular arroja el siguiente error:
Error: [ng: btstrpd] La aplicación ya se inició con este elemento ''<div id = "childApp">'' http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id% 3D% 22childApp% 22% 26gt% 3B
He reproducido este error en este plunk
<div id="parentApp">
<div ng-controller="MainParentCtrl">
Hello {{name}} !
<div id="childApp">
<div ng-controller="MainChildCtrl">
Hello {{childName}} !
</div>
</div>
</div>
EDITAR:
El uso de la inyección de Dependencia soluciona el problema de manera eficiente.
Ahora, necesito cargar el widget desde una directiva.
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));
}
};
}]);
El div se crea pero el módulo childApp no se carga adentro. He actualizado mi plunker
No intente arrancar ambos módulos. En su lugar, use la inyección de dependencia. Usted solo declara un módulo en su html y hace que ese módulo dependa del otro módulo usando código angular. Vea aquí: https://docs.angularjs.org/guide/concepts#module
Aquí está su plunkr actualizado: 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'']);
});
Para lograr el resultado esperado, use debajo
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById(''parentApp''), [''parentApp'',''childApp'']);
});
http://plnkr.co/edit/4oGw5ROo80OCtURYMVa3?p=preview
La sintaxis para bootstrap manual es la siguiente, independientemente del uso de controladores en elementos
angular.bootstrap(element, [modules]);