5

我正在使用指令将我的代码分成模板，并且我希望这些模板根据 if 条件加载。现在，当我查看网络流量时，无论是否ng-if满足条件，Angular 都会将所有模板发送到客户端。

<div class="container">
    <ul>
        <template1 ng-if="taskCategory == 'condition1'"></template1>
        <template2 ng-if="taskCategory == 'condition2'"></template2>
        <template3 ng-if="taskCategory == 'condition3'"></template3>
    </ul>
</div>

这是我的指令模板之一的示例：

/* Directive Template */
.directive('template1', [function() {
    return {
        restrict: 'E',
        templateUrl: 'view/templates/template1.tpl.html'
    };
}])

这是预期的行为吗？它在视觉上按预期工作。但我的印象是ng-if数据会根据条件延迟加载。还是我误解了如何使用ng-if？

4

2 回答 2

6

这绝对是预期的行为。ng-if将根据条件有条件地从 DOM 中删除元素。元素在被移除之前仍会被渲染（否则元素的克隆会被添加回 DOM）。

该行为在AngularJS: ngif文档的第一段中进行了说明。

于 2013-11-05T16:02:38.990 回答
1

'view/templates/template1.tpl.html'将在使用该template1指令的第一个视图的编译/链接阶段加载。

html 响应（在此阶段仅是文本）将被缓存在 $templateCache 中（默认情况下，angular 会这样做）并且在整个页面刷新之前永远不会有第二个 ajax。

即使在这种情况下，下一个 ajax 调用也将从浏览器缓存中提供，您可能只会看到 304 Not Modified。由于 html 是静态文件，因此应使用适当的缓存选项（例如 ETag 标头）为它们提供服务，并确保在您更改代码时重新加载它们（不要求用户清除其临时文件）。

于 2013-11-05T16:26:40.580 回答