anglejsのアクションボタンでスプラッシュ画面を作る方法

Question

以下のようにのようなanglejsのスプラッシュ画面を閉じるためのアクションボタンでスプラッシュ画面を作成したいと思います。

私は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>