无法让 Angular 控制器在 MVC 布局中工作
Posted
技术标签:
【中文标题】无法让 Angular 控制器在 MVC 布局中工作【英文标题】：Can't Get Angular Controller to work in MVC Layout 【发布时间】：2015-09-04 22:59:15 【问题描述】：我有一个 MVC 应用程序，它使用 _Layout 页面在每个页面中呈现标题和侧边栏。我正在尝试使用 Angular 的 Accordion 作为菜单。但是，一旦我尝试在我的 _Layout 页面中放置一个控制器，我的所有角度代码都会停止工作（我在通过 RenderBody() 显示的 Index.cshtml 中有角度）。
这是我的 _Layout 页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<link href="~/Content/Layout.css" rel="stylesheet" />
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/LayoutCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div ng-app="myModule" ng-controller="LayoutCtrl">
<nav class='sidebar sidebar-menu-collapsed'>
<a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-triangle-right'>
</span>
</a>
<ul>
<li class='active'>
<a class='expandable' href='#' title='Dashboard'>
<div id="myTab" class='vertical-text collapsed-element' style="color:blue; width:300px">Expand For Menu Options
</div>
<span class='expanded-element'>Dashboard</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='APIs'>
<span class="collapsed-element"></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Settings'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Account'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul>
<a href='#' id='logout-icon' title='Logout'>
<span class="collapsed-element"></span>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
<nav>
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
</accordion-heading>
</accordion-group>
</accordion>
</nav>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript">
(function ()
$(function ()
var collapseMyMenu, expandMyMenu, toggleGlyphCollapse, toggleGlyphExpand, hideMenuTexts, showMenuTexts;
expandMyMenu = function ()
document.getElementById('myBody').style.width = '80%';
document.getElementById('myBody').style.marginLeft = '320px';
document.getElementById('myTab').style.color = '#E6E7E8';
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
;
collapseMyMenu = function ()
document.getElementById('myBody').style.width = '99%';
document.getElementById('myBody').style.marginLeft = '70px';
document.getElementById('myTab').style.color = 'blue';
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
;
showMenuTexts = function ()
return $("nav.sidebar ul a span.expanded-element").show();
;
hideMenuTexts = function ()
return $("nav.sidebar ul a span.expanded-element").hide();
;
return $("#justify-icon").click(function (e)
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed"))
expandMyMenu();
showMenuTexts();
$(this).css(
color: "#000"
);
else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded"))
collapseMyMenu();
hideMenuTexts();
$(this).css(
color: "#FFF"
);
$(this).find('span').toggleClass('glyphicon-triangle-right').toggleClass('glyphicon-triangle-left');
return false;
);
);
).call(this);
</script>
</body>
</html>
这是我的 _Layout 的 Angular 控制器：
angular.module('myModule').controller('LayoutCtrl', function ($scope, generalsearchService)
getmenuItems();
function getmenuItems()
generalsearchService.GetMenuItems()
.success(function (data)
$scope.menuItems = data;
);
;
);
在我将上述内容添加到 _Layout 页面之前，我的 Index.cshtml 页面中的 Angular 工作正常。
谁能告诉我我错过了什么？我已经为此工作了几个小时，但似乎无法弄清楚。
非常感谢任何帮助！
【问题讨论】：
如果你检查你的控制台，我猜你会自己找到答案 对新手的讽刺已经消失了。我不知道你在说什么。 如果没有看到您遇到的错误，我们无法推断出太多。由于您没有发布错误，我猜您还没有检查控制台。如果您确实查看控制台，我猜您会自己弄清楚，因为 Angular 有相当不错的错误报告。 ***.com/tags/javascript/info见“调试”部分 另外，如果我是你，我会尝试摆脱那个 jquery，因为无论如何你都在使用 angular。我没有深入研究它，但看起来它可以全部替换为您的范围上的几个 css 类和一个角度状态属性（折叠/展开）。 这是一个示例样板，看起来像您的整个 jQuery 代码 jsbin.com/xoxacajota/edit?html,js,output 【参考方案1】：我找到了解决我的问题的方法，尽管它不是最好的解决方案，因为它需要我将所有东西都放在一个控制器中。解决方法是在我的 _Layout 页面主体中的所有内容周围放置一个 div（其中包括呈现我的索引页面的“@RenderBody”），并在 _Layout 页面上的该 div 中包含 ng-app 和 ng-controller。如果有人知道更好的解决方案..我全神贯注。感谢那些花时间尝试提供帮助的人。
【讨论】：
好吧，您只需要一个ng-app 指令（例如设置在主体上，因此您不需要包装器div），但如果您愿意，您可以拥有多个控制器。 ***.com/questions/24316355/… 如果您仍然遇到问题，请发布带有 MVCE 的 jsbin 或 plunkr。以上是关于无法让 Angular 控制器在 MVC 布局中工作的主要内容，如果未能解决你的问题，请参考以下文章
无法让 Jquery datepicker 在我的 asp.net mvc 项目中工作