Question

如何使用Angular执行this。我在wana显示整页与动画，而另一页正在加载，当该页面加载时，我wana显示...

修改

另外我有控制器，我需要等待控制器被加载...并且在加载控制器并将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);

                    });
                   }
               });
});

结束修改

这是我的尝试，但它不会等到整页加载它只会等到req完成...

有什么想法吗？

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();
            }
        });
    }

}

Answer 1

您不必定义自定义指令，可以使用ngCloak。看一下这个great turorial about ngCloak。

当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>

修改

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

使用ngIf：
完成加载后，可以删除loader元素
...  <div id="splash" ng-if="!loaded_comments"> <h2>Loading</h2> </div>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <div ng-controller="MainController"> </div> ...

JS：

app.run(function($rootScope) { $rootScope.loaded_comments = false; // <======== Setup initial state here }); app.controller('CommentsCtrl',function($scope,$http,$routeParams){ $scope.param = $routeParams.id; $scope.comments = []; $http.get("/api/comments/"+ $scope.param).success(function(data) { $rootScope.loaded_comments = true; // <======== set loaded state explicitly. //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); }); } }); }); });

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

1 个答案: