angularjs에서 동작 버튼으로 스플래시 스크린을 만드는 방법

Question

아래와 같이과 같은 angularjs의 스플래시 스크린을 닫으려면 작업 버튼으로 스플래시 스크린을 생성하고 싶습니다.

나는 ng-cloak로하려고하는데 원본 페이지가 올라 오면 그 스플래시가 숨겨져 있습니다. 그건 내가 원하는 것이 아니야. 내가 원하는 것은 무슨 일이 일어나도 스플래시 화면을 표시하고 싶습니다. 사용자가 해당 페이지에서 버튼을 클릭하면 숨겨집니다.

HTML

div.splash(ng-cloak) 
    h2 Loading 
div(ng-controller="myCtrl", ng-cloak) 
    //original page 

CSS 코드 아래

.splash { 
    display: none; 
} 

[ng-cloak].splash { 
    display: block !important; 
} 

.splash { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height:100%; 
    width:100%; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
    background: #000; 
} 

Answer 1

은 당신의 목표를 달성에 도움이 될 것입니다.

angular.module('app', []) 
 

 
.controller('MainCtrl', function() { 
 
    this.isContinue = false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MainCtrl as main"> 
 
    <div ng-if="!main.isContinue"> 
 
     <p>Splash screen</p> 
 
     <button ng-click="main.isContinue = true">Continue to site</button> 
 
    </div> 
 
    <div ng-if="main.isContinue"> 
 
     <p>Welcome to home page !</p> 
 
     <button ng-click="main.isContinue = false">Back to splash screen</button> 
 
    </div> 
 
</div>