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

Question

我正在使用指令将我的代码分成模板，并且我希望这些模板基于 if 条件加载。现在，当我查看网络流量时，Angular 将所有模板发送到客户端，而不管 ng-if条件满足。

<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 的第一段中说明。文档。