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.

Answer 2

'view/templates/template1.tpl.html' будет загружен во время фазы компиляции / ссылки первого представления, которое использует template1 директивы.

Ответ html (не более чем текст на этом этапе) будет кэшироваться внутри $ templateCache (по умолчанию это делает angular), и второго обновления Ajax никогда не будет до полного обновления страницы.

Даже в этом случае следующий вызов ajax будет обслуживаться из кэша браузера, и вы можете увидеть только 304 Not Modified. Поскольку htmls являются статическими файлами, они должны быть снабжены надлежащими параметрами кэша (например, заголовок ETag) и должны быть перезагружены, если вы измените код (не предлагая пользователям очистить свои временные файлы).