0
我有一個MVC應用程序，它使用_Layout頁面在每個頁面中呈現頁眉和側欄。我正在嘗試使用Angular的手風琴菜單。但是，只要我嘗試在我的_Layout頁面中放置一個控制器，我所有的角碼停止工作（我在Index.cshtml中通過RenderBody（）顯示角度）。無法讓角控制器在MVC佈局中工作
這是我_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.module('myModule').controller('LayoutCtrl', function ($scope, generalsearchService) {
getmenuItems();
function getmenuItems() {
generalsearchService.GetMenuItems()
.success(function (data) {
$scope.menuItems = data;
});
};
});
我Index.cshtml頁角正常工作，直到我加入以上_Layout頁面。
誰能告訴我我失蹤了什麼？我一直在這個工作幾個小時，似乎無法弄清楚。
任何援助非常感謝！
如果你檢查你的控制檯，我猜你會自己找到答案 – Jan
諷刺是失去了一個新手。我不知道你在說什麼。 –
如果沒有看到您遇到的錯誤，我們無法推測出多少。既然你沒有發佈錯誤，我猜你沒有檢查過控制檯。如果你看看控制檯，我猜你會發現自己，因爲Angular有一個相當不錯的錯誤報告。 http://stackoverflow.com/tags/javascript/info請參閱「調試」部分 – Jan