Angularjs 如何显示一些HTML，直到屏幕以Angular/Ionic格式加载？

我用的是爱奥尼亚，我找不到解决问题的办法。我想做的是在加载屏幕之前显示一些HTML。您可以使用默认的

$ionicLoading

，但这只会给我一个覆盖，而我不希望这样。我是

Angular

和

Ionic

的新手，所以这可能是一个非常简单的问题，但我就是解决不了

为此，我将HTML添加到我希望添加的屏幕中。我是这样做的：

<div class="preload-wrapper" ng-show="removeAfterLoad">
  <p>Please wait, the page is being loaded </p>
</div>

它是否类似于我需要使用的

$scope.hide

。如果是这样，如何将其绑定到HTML代码段？

我建议使用

向标记添加ng-Clope将隐藏它，直到页面被完全加载，并且可以以相反的方式使用

第一步

在

标记之间添加此样式

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

[ng-cloak].loading {
    margin-top: 150px;
    text-align: center;
    display: block !important;
}
.loading {
    display: none;
}

步骤2：

将此添加到index.html

<div class="loading" ng-cloak>
        <i class="fa fa-spinner  fa-pulse fa-3x fa-fw"></i>
        <span class="sr-only">Loading...</span>
 </div> 

<div class="container" ng-cloak>
.....content goes here
</div>

加载。。。
……内容就在这里

---

页面完全加载后，ng斗篷将向加载div添加“隐藏”并显示容器div。

您可以使用自己的html代码覆盖$ionicLoading模板/覆盖。这是文件：$ionicLoading/

甚至可以替代任何视图的默认样板

在您的示例中，您可以执行以下操作：

angular.module('LoadingApp', ['ionic'])
    .controller('LoadingCtrl', function($scope, $ionicLoading) {
      $scope.show = function() {
        $ionicLoading.show({
          template: '<div class="preload-wrapper" ng-show="removeAfterLoad"> '+
                        '<p>Please wait, the page is being loaded </p> '+
                    '</div>',
          duration: 3000,
          //if you want to hide the background overlay
          noBackdrop: true 

        }).then(function(){
           console.log("The loading indicator is now displaying your html");
        });
      };
      $scope.hide = function(){
        $ionicLoading.hide().then(function(){
           console.log("The loading indicator is now hidden");
        });
      };
});

---

其实很简单：

在控制器内部，您需要添加$ionicLoading，如下所示-

 $ionicLoading.show({
        template: '<ion-spinner></ion-spinner> <br/> Please wait, the page is being loaded'
    });

$ionicLoading.show({
模板：“
请稍候，正在加载页面”
});

并在函数成功回调后隐藏：

---

$ionicLoading.hide（）

谢谢你，泰勒，但是不行。当屏幕加载时，它根本不显示“加载”。相反，它在默认情况下是不可见的。我会拉小提琴看一看。是的，但是你读了我的文字吗？我不想使用IonicLoading，因为它给了我一个覆盖。。。我想去掉覆盖层。我不完全理解你所说的覆盖层是什么意思。如果您想移动黑色/灰色背景，只需在加载选项上使用noBackdrop:true，如文档中所述。不管怎样，你可以使用css使你的html占据整个屏幕，改变背景覆盖颜色或透明度等等。是的，但是你读过我的文本吗？我不想使用IonicLoading，因为它给了我一个覆盖。。。我想去掉覆盖层。

$scope.$on("$ionicView.beforeLeave", function(event, data){
   // show loading
});

$scope.$on("$ionicView.beforeEnter", function(event, data){
   // hide loading
});

 $ionicLoading.show({
        template: '<ion-spinner></ion-spinner> <br/> Please wait, the page is being loaded'
    });