Javascript 如何在另一个页面加载时显示加载页面[AngularJS]_Javascript_Angularjs

Javascript 如何在另一个页面加载时显示加载页面[AngularJS]

javascript angularjs

Javascript 如何在另一个页面加载时显示加载页面[AngularJS],javascript,angularjs,Javascript,Angularjs,我该怎么做呢。当另一个页面加载时，我会用动画显示整个页面，当该页面加载时，我会显示编辑：另外我有控制器，我需要等待conroller加载。。。在加载控制器并将html添加到页面后，我需要删除加载页面并显示内容 .controller('CommentsCtrl',function($scope,$http,$routeParams){ $scope.param = $routeParams.id; $scope.comments =

我该怎么做呢。当另一个页面加载时，我会用动画显示整个页面，当该页面加载时，我会显示

编辑：

另外我有控制器，我需要等待conroller加载。。。在加载控制器并将html添加到页面后，我需要删除加载页面并显示内容

 .controller('CommentsCtrl',function($scope,$http,$routeParams){
              $scope.param = $routeParams.id;
              $scope.comments = [];
              $http.get("/api/comments/"+ $scope.param)
              .success(function(data){
               //GET ALL USER AND COMMENTS TOGETHER
               $.each(data,function(index,value){
                   if(value.user){
                    $.each(value.user,function(index1,value1){
                        var new_object = $.extend({}, value, value1);
                        $scope.comments.push(new_object);

                    });
                   }
               });
});

结束编辑

这是我的尝试，但它不会等到完整的页面加载它只会等到获取请求完成

有什么想法吗

angular.module('loading')
        .directive('loading', loading);


function loading($http) {
    var loadingSniper = {
        link: link,
        restrict: "AE"
    };

    return loadingSniper;

    function link(scope, elm, attrs)
    {
        scope.isLoading = function () {
//            console.log('Remaining: ' + $http.pendingRequests.length);
            return $http.pendingRequests.length > 0;
        };

        scope.$watch(scope.isLoading, function (v)
        {
            if (v) {
                elm.show();
            } else {
                elm.hide();
            }
        });
    }

}

您不必定义自定义指令，可以使用。看看这个

当angular完成所有指令的编译时，此指令将隐藏属性化元素

<html>
  <head>
    <title>My Angular App</title>
    <style type="text/css">
      .splash {}
    </style>
  </head>
  <body ng-app="myApp">
    <!-- The splash screen must be first -->
    <div id="splash" ng-cloak>
      <h2>Loading</h2>
    </div>
    <!-- The rest of our app -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <div ng-controller="MainController">
    </div>
    <script src="js/app.js"></script>
  </body>
</html>


我的Angular应用程序
.splash{}
加载

编辑

在控制器代码中启动了一些异步任务。不要忘记异步任务可以是 $http请求（如您的情况）或在WebWorker上等待或运行的任何代码。这就是为什么没有通用解决方案。在这种情况下，我建议您在范围中引入一个状态变量。它甚至会允许您拥有多个加载器占位符（例如，注释、新闻、库、，不管怎样）

使用ngIf完成加载后，可以删除加载程序元素：

...
<!-- The splash screen must be first -->
<div id="splash" ng-if="!loaded_comments">
  <h2>Loading</h2>
</div>
<!-- The rest of our app -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-controller="MainController">
</div>
...

。。。
加载
...

js:

app.run（函数（$rootScope）{
$rootScope.loaded_comments=false；//您不必定义自定义指令，您可以使用。请看一下
当angular完成所有指令的编译时，此指令将隐藏属性化元素
<html>
  <head>
    <title>My Angular App</title>
    <style type="text/css">
      .splash {}
    </style>
  </head>
  <body ng-app="myApp">
    <!-- The splash screen must be first -->
    <div id="splash" ng-cloak>
      <h2>Loading</h2>
    </div>
    <!-- The rest of our app -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <div ng-controller="MainController">
    </div>
    <script src="js/app.js"></script>
  </body>
</html>


我的Angular应用程序
.splash{}
加载

编辑
在控制器代码中启动了一些异步任务。不要忘记异步任务可以
$http请求（如您的情况）或在WebWorker上等待或运行的任何代码。这就是为什么没有
通用解决方案。在这种情况下，我建议您在作用域中引入一个状态变量。它甚至会
允许您拥有多个加载器占位符（例如，注释、新闻、库、，
不管怎样）
使用ngIf完成加载后，可以删除加载程序元素：
...
<!-- The splash screen must be first -->
<div id="splash" ng-if="!loaded_comments">
  <h2>Loading</h2>
</div>
<!-- The rest of our app -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-controller="MainController">
</div>
...

。。。
加载
...

js:
app.run（函数（$rootScope）{
$rootScope.loaded_comments=false；//如何定义完整页面加载？您甚至可以从控制器引导代码启动更多请求。加载页面时可能需要自定义事件处理来发出信号。这只是在页面上加载sniper，其他什么都没有……检查我的示例。如何定义完整页面加载？您可以启动更多重新加载任务甚至来自你的控制器引导代码。它可能需要自定义事件处理来在页面加载时发出信号。它只是在页面上加载狙击手，其他什么都没有…检查我的例子。这是一个很好的解决方案，但我仍然有问题…启动屏幕完成，但页面上仍然没有加载内容。请检查我对主要问题的更新。Tha这是一个很好的解决方案，但我仍然有问题…启动屏幕完成，但内容仍然没有加载到页面上。请检查我对主要问题的更新。