angularjs 仅全屏主页

Question

我在一个只有主页有全屏背景的网站上工作。在其他页面上，他们使用普通的 bootstrap 容器。为了将 100% 高度传递到其内部 css，我使用了一个额外的视图。但是这样一来，所有其他页面都被强制下移，因为它们上面的 space 是 100% 高度。我的问题是，如果我不在主页，我该如何删除 'style = height:100%'？

<body>
    <div ui-view="enterHome" style="height:100%;"></div> <!-- additional view -->

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

我的 app.js 如下所示：（即，对于 state = enterHome，我只显示了 enterHome 模板。）

.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
    .state('enterHome',{
        url:"/",            
        views:{
            "navbar":{
            },
            "carousel":{
            },
            "enterHome":{
                templateUrl:"templates/enterHome.body.html",
                controller: "EnterHomeBodyController"
            },
            "footer":{                  
            }               
        }
    })

Answer 1

测试当前状态为首页状态：

<div ui-view="enterHome" style="{{ ('homepage' | isState) ? 'height:100%;' : '' }}></div>

或者，为了更简洁，用 height: 100% 定义 full-height css class，如果状态是主页，则应用 class：

<div ui-view="enterHome" ng-class="{ 'full-height' : ('homepage' | isState) }></div>

Answer 2

你可以用CSS喜欢

.full-height {
    height:100%;
}

你可以在模板中使用 ng-class

<div ui-view="enterHome" ng-class="full-height: isHomePage"></div>

在您的主页控制器中：

$scope.isHomePage = true;

在其他页面中变量不会被定义，所以它将是false并且不会应用全高class。

angularjs 仅全屏主页

angularjs fullscreen homepage only

angularjs

fullscreen