Ng-switch и ng-repeat на одном и том же элементе

Я столкнулся с поведением в Angular, которого я не ожидал, и цель этого сообщения - выяснить, является ли это ошибкой или предполагаемым и, возможно, объяснением, почему оно предназначено.

Сначала просмотрите этот Plunkr: http://plnkr.co/edit/CB7k9r?p=preview. В этом примере я создал массив с массивом с тремя объектами. Далее я создал ng-переключатель на основе содержимого поля ввода (называемого toggle). Когда значение toggle равно 1, оно должно печатать все имена объектов в массиве с префиксом "1" и в противном случае префикс "other".

Это не работает так, как предполагалось, и показывает ошибку:

Однако тот же пример переписан (http://plnkr.co/edit/68Mfux?p=preview) с дополнительным div вокруг списка, ng-переключатель переместился в этот div и ng-switch - при перемещении из li в ul (разделение ng-repeat и ng-switch-when) работает по назначению.

Может ли кто-нибудь объяснить, почему это так?

Ответы

Ответ 1

Это "намеренно", так как это продукт того, как angular обрабатывает ng-repeat. По сути, клонируются множественные копии разметки (разметка внутри ng-repeat используется в качестве шаблона) и скомпилированы отдельно для каждого элемента, который вы итерируете. Таким образом, angular в основном компилирует 3 <li ng-switch-when='1' ....> и 3 <li ng-switch-default ....>, но делает это вне контекста - нет элемента ng-switch-on для сравнения с.

Это можно увидеть, просмотрев полученную разметку:

<ul ng-switch="" on="toggle">  
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->        
</ul>

Обе директивы - ng-repeat и ng-switch - должны обрабатываться с осторожностью, поскольку они (в отличие, например, ng-show или ng-hide) сильно влияют на структуру. Второй (рабочий) Plunker - путь для работы - работает только с директивами ПОСЛЕ (структурно, ВНУТРИ) логики ng-switch.