gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:55:02 25 4
gpt4 key购买 nike

我该怎么办this与 Angular 。我想在加载另一个页面时显示带有动画的完整页面,当加载该页面时我想显示...

编辑:

我还有 Controller ,我需要等待 Controller 加载...在 Controller 加载并将 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);

});
}
});
});

结束编辑

这是我的尝试,但它不会等到整页加载,它只会等到 get 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();
}
});
}

}

最佳答案

您不必定义自定义指令,您可以使用 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>

编辑

您在 Controller 代码中启动了一些异步任务。不要忘记异步任务可以是$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(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);
});
}
});
});
});

关于javascript - 如何在另一个页面正在加载时显示正在加载的页面 [AngularJS],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32632958/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com