touched template make engine componentes attribute javascript angularjs nested angularjs-module

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