NgIf и ngSwitch AngularJS

Какая практическая разница между ngIf и ngSwitch? Обе директивы управляют DOM, но ngSwitch является более подробным. Является ли типичный случай просто использовать ngIf, если вам не нужен что-то действительно большое, в этом случае используйте ngSwitch?

Есть ли ситуация, когда ngSwitch и ngIf не являются прямыми заменами? Или их единственное практическое отличие от синтаксиса?

Ответы

Ответ 1

Брэндон Тилли, по-моему, понял это точно, в частности, указав контраст с ngShow/ngHide. Там есть еще одна разница: ng-If будет отсоединять и снова прикреплять элемент на месте. Но ng-Switch имеет внешний содержащий элемент, на котором вы объявляете главную директиву и ее условие: ng-switch="expression" . Условное содержимое внутри этого внешнего элемента будет append() -ed как последний дочерний элемент внешнего элемента, тем самым изменяя его положение относительно любого некондиционного содержимого внутри внешнего элемента.

И, см. этот CodePen для интерактивной демонстрации всех трех, показывая различия в исполнении.

EDIT: это поведение изменилось в Angular 1.2. Элементы теперь оставлены на месте. Codepen выше упоминает и демонстрирует это, обеспечивая связь с 1.08 Plunk, который, к сожалению, был уничтожен...

Ответ 2

ngIf - это в основном версия ngSwitch с одним условием. Он отличается от ngShow тем, что он удаляет фактический элемент DOM, а не просто скрывает его. Если вы используете ngSwitch только с одной проверкой состояния, то я верю, что ngIf сделает то же самое.

Ответ 3

Еще одно отличие заключается в том, что ngIf и ngSwitch создают новые области действия, в то время как ngShow/ngHide не делают.

Ответ 4

Вы можете думать в ngIf/ngSwitch так же, как с if/switch при кодировании. Очевидно, что они делают почти то же самое, но есть случаи, когда ngIf лучше, и есть случаи, когда nfSwitch лучше.