ngIf и ngSwitch AngularJS
В чем практическая разница между ngIf а также ngSwitch? Обе директивы манипулируют DOM, но ngSwitch более многословно Это типичный случай, чтобы просто использовать ngIf если вам не нужно что-то действительно большое, в этом случае используйте ngSwitch?
Есть ли ситуация, когда ngSwitch а также ngIf не прямые замены? Или их единственное практическое отличие - синтаксис?
4 ответа
Полагаю, что Мишель Тилли понял все правильно, особенно в отношении контраста с ngShow/ngHide, Есть еще одно отличие: ng-If отсоединит и повторно прикрепит элемент на месте. Но ng-Switch имеет внешний содержащий элемент, для которого вы объявляете главную директиву и ее условие: ng-switch="expression", Условное содержимое в этом внешнем элементе будет append()-ed как последний дочерний элемент внешнего элемента, таким образом изменяя его положение относительно любого безусловного содержимого внутри внешнего элемента.
И посмотрите этот CodePen для интерактивной демонстрации всех трех, показывая различия в исполнении.
РЕДАКТИРОВАТЬ: Это поведение изменилось в Angular 1.2. Элементы теперь остались на месте. Вышеупомянутый Codepen упоминает и демонстрирует это, предоставляя ссылку на 1.08 Plunk, который, к сожалению, был уничтожен...
ngIf в основном версия ngSwitch с одним условием. Это отличается от ngShow тем, что он удаляет фактический элемент DOM, а не просто скрывает его. Если вы используете ngSwitch только с одной правдивой проверкой состояния, тогда я верю ngIf будет делать то же самое.
Еще одно отличие состоит в том, что ngIf и ngSwitch создают новые области видимости, а ngShow/ngHide - нет.
Вы можете думать в ngIf/ngSwitch так же, как вы делаете это с if/switch при кодировании. Очевидно, что они делают почти то же самое, но есть случаи, когда ngIf лучше, и есть случаи, когда nfSwitch лучше.