Angular JS - Trabajando con multiples APP (module) en una misma página
Cuando tenemos dos o más Modules sólo funcionará el primero, para solucionar esto tan solo hay que llamar a cada uno de los aspx en un div y llamar a la función de angular.bootstrap para cada uno de los module.
//al principio de la página
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosModule.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosService.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosController.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasModule.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasService.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasController.js")"></script>
<div id="divAltaEmpresa">@{Html.RenderPartial("AltaEmpresa");}</div>
<div id="divAltaUsuario">@{Html.RenderPartial("AltaUsuario");}</div>
//al final de la página
<script type="text/javascript">
var dvFirst = document.getElementById('divAltaEmpresa');
var dvSecond = document.getElementById('divAltaUsuario');
angular.element(document).ready(function () {
angular.bootstrap(dvFirst, ['EmpresasModule']);
angular.bootstrap(dvSecond, ['UsuariosModule']);
});
</script>
//al principio de la página
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosModule.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosService.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/usuarios/UsuariosController.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasModule.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasService.js")"></script>
<script src="@VirtualPathUtility.ToAbsolute("~/Scripts/empresas/EmpresasController.js")"></script>
<div id="divAltaEmpresa">@{Html.RenderPartial("AltaEmpresa");}</div>
<div id="divAltaUsuario">@{Html.RenderPartial("AltaUsuario");}</div>
//al final de la página
<script type="text/javascript">
var dvFirst = document.getElementById('divAltaEmpresa');
var dvSecond = document.getElementById('divAltaUsuario');
angular.element(document).ready(function () {
angular.bootstrap(dvFirst, ['EmpresasModule']);
angular.bootstrap(dvSecond, ['UsuariosModule']);
});
</script>
Comentarios
Publicar un comentario