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>

多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-include）

<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

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

AngularJS ng-include完成

1 个答案: