【发布时间】：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 有相当不错的错误报告。 stackoverflow.com/tags/javascript/info见“调试”部分
-
另外，如果我是你，我会尝试摆脱那个 jquery，因为无论如何你都在使用 angular。我没有深入研究它，但看起来它可以全部替换为您的范围上的几个 css 类和一个角度状态属性（折叠/展开）。
-
这是一个示例样板，看起来像您的整个 jQuery 代码 jsbin.com/xoxacajota/edit?html,js,output
标签： javascript angularjs asp.net-mvc