如何使用angularjs中的动作按钮制作启动画面

Question

我想创建带有操作按钮的启动画面，以关闭像Forbes.com这样的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>