Question

我有一个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;
        });
    };
});

我的Index.cshtml页面中的Angular工作正常，直到我将上述内容添加到_Layout页面。

谁能告诉我我失踪了什么？我已经做了几个小时的工作，似乎无法弄明白。

非常感谢任何帮助！

Answer 1

我找到了解决我的问题的方法，虽然它不是最好的解决方案，因为它需要我把所有东西放在一个控制器中。解决方法是在我的_Layout页面（包括＆＃34; @ RenderBody＆＃34;呈现我的索引页面）的主体中放置一个div，并在该div中包含ng-app和ng-controller _Layout页面。如果有人知道更好的解决方案......我全都耳朵。感谢那些花时间尝试提供帮助的人。

无法让Angular Controller在MVC布局中工作

1 个答案: