Question

我使用angulars UI路由器分别加载每个页面。我在header.html中有标题导航栏和侧边栏，在login.html中有主要内容（动态）

登录html页面与侧边栏和页脚重叠，因为它是单独加载的。我该如何解决？我应用了包装器（自定义css）类，但它根本没有影响布局。

此处链接：http://angularspring-management999.rhcloud.com/default.html

示例代码：

<body>
    <div id="wrap">

        <!--header-->
        <div ui-view="header"></div>

        <!--sidebar-->
        <div ui-view="sidebar"></div>

        <!--main content-->
        <div ui-view="content"></div>
    </div>

    <!--footer-->
    <div ui-view="footer"></div>
</body>

国：

myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("/Login");

var header = {
    templateUrl: 'views/Header.html',
    controller: function ($scope) {
    }
};

var sidebar = {
    templateUrl: 'views/SideBar.html',
    controller: function ($scope) {
    }
};

var footer = {
    templateUrl: 'views/Footer.html',
    controller: function ($scope) {
    }
};
// Now set up the states
$stateProvider
    .state('Login', {
        url: "/Login",
        views: {
            'header': header,
            'sidebar': sidebar,
            content: {
                templateUrl: 'views/Login.html',
                controller: function ($scope) {
                }
            },
            'footer': footer
        }
    });

Answer 1

使用bootstraps网格会不会像这样工作？

<div class="row">
    <div class="col-xs-3">
        <div ui-view="view-1"></div>
    </div>
    <div class="col-xs-9">
        <div ui-view="view-2"></div>
    </div>
</div>

我在我的应用中只使用过1 ui-view元素，然后为这类功能创建了自定义指令。但根据文档，你的方式应该没问题。请注意，有时ui-view可以覆盖某些模板属性。

无法将div内容定位到页面中心

1 个答案: