Angular 怎么在加载中加入 Loading 提示框

最新推荐文章于 2025-06-04 09:20:12 发布

kolabb

最新推荐文章于 2025-06-04 09:20:12 发布

阅读量1.1w

点赞数

分类专栏： WEB

WEB 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种在AngularJS应用中实现全局加载指示器的方法。通过定义一个全局的忙碌状态变量并使用事件来通知这一状态的变化，可以方便地在应用的任何地方触发加载动画的显示或隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[转自] http://zhidao.baidu.com/link?url=MX9eSRkQbBC8zrjsCi-t_PsftVRSIjiaUTHhdp6eDiZ0IqaZehSCo3n7fFXWyP3fzKR1uDfUN0VpiOhUtXvEDpv1hmofuevrSrBNvutbWz_

0、提供一种用过（也许已不是最佳）的思路：

0.1、最外层的 index.html 放个内容为 "Loading..." 的 div；通过最外层 controller 的 $scope.busy 变量，使用 ng-show 控制是否显示；

0.2、需要显示 Loading 时，冒泡 BUSY 事件；最外层 controller 收到 BUSY 事件就将 $scope.busy 置为 true，那个 DIV 就显示了；

0.3、同理，要隐藏就冒泡 NOTBUSY 事件；

1、假设目录结构是：

index.html (这是最外层，body 的 controller 是 mainController；这里写 ng-view)

/partial (各子 view 放这里)

2、index.html 的 body 使用的 mainController 是最外层 controller，在这 mainController 监听 BUSY/NOTBUSY 事件：

1

2

3

4

$scope.$on("BUSY", function(){        $scope.busy = true;

});

$scope.$on("NOTBUSY", function(){        $scope.busy = false;

});

index.html 里放着那个显示 "Loading..." 字样的 DIV:

1

2

3

<div class="loading" ng-show="busy"> <i class="fa fa-spin fa-spinner fa-lg"></i>

        loading ...

</div>

3、使用：

比如在子 view /partial/po.html （使用 poController）中某动作后要显示 Loading 框：

在 poController.js 中：

1

2

3

4

5

6

$scope.getAllPOs = function(){

    $scope.$emit("BUSY");

    // get data from server

    // ...

    // when done call $scope.$emit("NOTBUSY");

};