2014-12-14 3 views
0

로그인 페이지에 로그인하지 않은 사용자를 배치하려고합니다. 로그인 페이지에는 전체 화면 배경 이미지가 있어야하며 사용자가 로그인 페이지에 로그인해서는 안되는 그 전체 화면 배경 이미지. 대한AngularJS : 가입 및 콘텐츠 페이지 하나의 index.html

지금 나는이 있습니다

<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid"> 
    <div ng-show="!$root.loggedIn" class="landing"> 
     <p>login</p> 
    </div> 

    <div ng-show="$root.loggedIn"> 
    ... 
    </div> 
</div> 

내 착륙 클래스는 다음과 같습니다 : 여기 background-color를 사용하고 있지만,이 차이를해서는 안

.landing { 
    height: 100%; 
    width: 100%; 
    background-color: #DDD; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.

이제 $root.loggedIn이 거짓 인 경우 전체 화면이 약간의 "테스트"가 기록 된 회색 (#DDD)이어야합니다. 맞습니까? http://i.stack.imgur.com/pHJwR.jpg (죄송합니다 제가 저 명성을 가진 이미지를 게시 할 수 없습니다 ..)

+0

왜 mainCtrl이 아닌지 $ root.loggedIn –

+0

내 컨트롤러에서'$ rootScope.loggedIn = 0;'을 사용하고 있습니다. 나중에 loggedIn 값이 필요할 수 있기 때문입니다. – user2974705

+0

https://github.com/firebase/angularfire-seed의 app.js/routes에있는 예를 살펴보십시오. – AMG

답변

1

당신이 가지고있는 CSS는 그것의 100 %을 차지하기 위해 사업부를 알려주기 때문에 단 한 줄의 높이가의 이유 :

그것은 다음과 같습니다 부모의 너비와 높이. 이 경우 div입니다. div와 같은 블록 수준 요소는 부모의 전체 너비를 채우지 만 내용이 없으면 확장되지 않습니다. 이것은 body 요소까지 계속됩니다.

이이 주위에 몇 가지 방법을하지만 나는 절대 위치와 주위에 쉽게 얻을 당신을 위해 생각 :이 문서의 흐름에서 당신의 사업부 소요

.landing { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: #DDD; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

대신에 뻗어 창문 네 모서리.

관련 문제