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

发布时间：2020-12-17 10:09:11 所属栏目：安全来源：网络整理

导读：[转自]http://zhidao.baidu.com/link?url=MX9eSRkQbBC8zrjsCi-t_PsftVRSIjiaUTHhdp6eDiZ0IqaZehSCo3n7fFXWyP3fzKR1uDfUN0VpiOhUtXvEDpv1hmofuevrSrBNvutbWz_ 0、提供一种用过（也许已不是最佳）的思路： 0.1、最外层的 index.html 放个内容为 "Loading..."

[转自]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 
      ; 
     
 
      }); 
     
 
      "NOTBUSY" 
      false 
      ; 
     
 
      }); 
     

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

1

2

3

 
      < 
      div 
      class 
      = 
      "loading" 
      ng-show 
      "busy" 
      >< 
      i 
      "fafa-spinfa-spinnerfa-lg" 
      ></ 
      i 
      > 
     
 
       
      loading... 
     
 
      </ 
      div 
      > 
     

3、使用：

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

在 poController.js 中：

1

2

3

4

5

6

$scope.getAllPOs= (){

$scope.$emit( );

//getdatafromserver

//...

//whendonecall$scope.$emit("NOTBUSY");

};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!