Question

我正在使用Directives将我的代码分成模板，我希望这些模板基于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？

Answer 1

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

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

Answer 2

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

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

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

AngularJS：无论ng-if条件如何，加载指令模板

2 个答案: