AngularJS ng-include finished

Question

我正在使用ng-include加载大量数据。

我想知道是否有办法知道模板何时被“渲染”，因为有时它看起来像被“冻结”了，因为我想做一个“加载屏幕”或其他东西。

Thx。

下面的代码

控制器代码：

$scope.layout = { 
    current: 'single-table.html' 
}; 

$scope.layout.get = function() { 
    return $scope.layout.current; 
}; 

模板： main.html中

<div class="btn-group"> 
<button ng-click="layout.current = 'single-table.html'">Single</button> 
<button ng-click="layout.current = 'multiple-table.html'">Multiple</button> 
</div> 

<div ng-include="layout.get()"></div> 

单table.html

<table class="table table-bordered"> 
<thead> 
    <th ng-repeat="column in columns">{{ column.title }}</th> 
</thead> 
<tbody> 
    <tr ng-repeat="record in records"> 
     <td ng-repeat="field in record.fields" 
      ng-controller="FieldController" 
      ng-class="getClass()"> 
      {{ field.display }} 
     </td> 
    </tr> 
</tbody> 
</table> 

MUL tiple-table.html

<table class="table table-bordered" ng-repeat="record in records"> 
<tbody> 
    <tr ng-repeat="field in record.fields"> 
     <th>{{ columns[$index].title }}</th> 
     <td ng-controller="FieldController" ng-class="getClass()"> 
      {{ field.display }} 
     </td> 
    </tr> 
</tbody> 
</table> 

编辑

我使用的是1.2.0版本

一个解决方案（可能不是最好的）是这样做的（无NG-包括）

<table class="table table-bordered" ng-show="layout.current == 'single-table.html'"> 
<thead> 
    <th ng-repeat="column in columns">{{ column.title }}</th> 
</thead> 
<tbody> 
    <tr ng-repeat="record in records"> 
     <td ng-repeat="field in record.fields" 
      ng-controller="FieldController" 
      ng-class="getClass()"> 
      <span lud-run="{{ field.ng_directive }}"></span> 
     </td> 
    </tr> 
</tbody> 
</table> 

<table class="table table-bordered" ng-repeat="record in records" ng-show="layout.current == 'multiple-table.html'"> 
<tbody> 
    <tr ng-repeat="field in record.fields"> 
     <th>{{ columns[$index].title }}</th> 
     <td ng-controller="FieldController" ng-class="getClass()"> 
      <span lud-run="{{ field.ng_directive }}"></span> 
     </td> 
    </tr> 
</tbody> 
</table> 

我只有20条记录，但（不在代码中），每个单元格根据数据类型（字符串，日期，日期时间，图像...）加载自定义指令。我认为这个“解决方案”运行两次相同的数据（ng-show，而不是ng-if），但是当切换布局模式时没有“滞后”。

Answer 1

当包含完成呈现时，您可以使用ng-include上的onload挂钩更新变量。如果在单击按钮时将其设置为true，则在onload中将其恢复为false，则应该可以利用它临时显示加载屏幕。