Estou desenvolvendo uma aplicação utilizando o melhor dos dois mundos de Asp.net MVC e AngularJs. Faço as requisições do banco com WEBApi o que funciona muito bem. Mas agora eu adicionei um modulo angular na layout page. O ng-app da layout page funciona perfeitamente, porém agora os módulos das páginas que estão dentro do render body não funcionam. Alguém saberia me dizer o porque o módulo adicionado na layout page atrapalha no funcionamento das outras páginas mesmo em divs não aninhadas. Eu não vou colocar o código aqui porque é uma aplicação comercial e tem muita informação. mas basicamente a estrutura é
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<link rel="icon" href="~/favicon.ico"/>
<!--CSS-->
@Styles.Render("~/Content/dashboard")
<!--SCRIPTS-->
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/angular")
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div ng-app="LayoutApp">
<div ng-controller="LayoutCtrl" ng-init="loadInfos()" ng-cloak>
... Menus e SideBars
</div><!--CTRL-->
</div><!--APP-->
<div class="content-wrapper">
<section class="content">
@RenderBody()
</section>
</div>
<footer class="main-footer">
</footer>
<!--SCRIPTS-->
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/dashboard")
@Scripts.Render("~/bundles/modulesLayout")
</body>
</html>
e a estrutura das páginas do renderbody
@{
ViewBag.Title = "T";
Layout = "~/Areas/MinhaConta/Views/Shared/_LayoutPage.cshtml";
}
@Scripts.Render("~/bundles/modulesCtrl")
<div ng-app="MyApp">
<div ng-controller="MyCtrl" ng-init="loadInfos()">
</div>
</div>