javascript - 如何在angularjs中使用 Action 按钮制作启动画面

Question

我想创建带有操作按钮的启动画面，以在 angularjs 中关闭该启动画面，如 Forbes.com如下。

我正在尝试使用 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>