может быть интересный момент, это разница между приоритетами между ними.

насколько я могу судить, директива ng-if имеет один из самых высоких (если не самый высокий) приоритет всех угловых директив. Это означает: он будет работать в первую очередь перед всеми другими, более низкими приоритетами, директивами. Тот факт, что он запускается первым, означает, что эффективно элемент удаляется до любого внутренний директивы обрабатываются. Или по крайней мере: это то, что я делаю оно.

Я наблюдатель и использовал это в пользовательском интерфейсе, который я создаю для своего текущего клиента. Весь пользовательский интерфейс довольно сильно упакован, и на нем были ng-show и ng-hide. Не вдаваясь в подробности, но я построил общий компонент, которым можно управлять с помощью конфигурации JSON, поэтому мне пришлось сделать некоторые переключения внутри шаблона. Есть НГ-повторите присутствующим, и внутри НГ-повторите, таблицы показал, что есть много НГ-шоу, НГ-скрыть и даже НГ-ключей. Они хотели показать по крайней мере 50 повторений в списке, что приведет к более или менее 1500-2000 директив, которые будут решены. Я проверил код, и Java backend + custom JS на передней панели займет около 150 мс для обработки данных, а затем Angular будет жевать его около 2-3 секунд, прежде чем отображать. Клиент не жаловался, но я был потрясен :-)

в моем поиске я наткнулся на директиву ng-if. Теперь, возможно, лучше всего указать, что в момент зачатия этого пользовательского интерфейса было нет ng-если доступно. Поскольку в ng-show и ng-hide были функции, которые возвращали булевы, я мог легко заменить их все на ng-if. Таким образом, все внутренние директивы, казалось, больше не оценивается. Это означало, что я вернулся примерно к трети всех оцениваемых директив, и, таким образом, пользовательский интерфейс ускорился до времени загрузки около 500 мс - 1 сек. (у меня нет способа определить точное секунды)

обратите внимание: тот факт, что директивы не оцененный, является образованным предположением о том, что происходит внизу.

Итак, на мой взгляд: если вам нужно, чтобы элемент присутствовал на странице (т. е. для проверки элемента или чего-то еще), но просто был скрыт, используйте ng-show/ng-hide. Во всех остальных случаях используйте ng-if.

The ng-if директива удаляет содержимое со страницы и ng-show/ng-hide использует CSS display свойство для скрытия содержимого.

это полезно в случае, если вы хотите использовать :first-child и :last-child псевдо-селекторов в стиле.

@EdSpencer правильно. Если у вас много элементов, и вы используете ng-if только для создания соответствующих экземпляров, вы экономите ресурсы. @CodeHater также является несколько правильным, если вы собираетесь удалить и показать элемент очень часто, скрывая его вместо удаления может повысить производительность.

основной вариант использования, который я нахожу для ng-if, заключается в том, что он позволяет мне чисто проверить и исключить элемент, если содержимое незаконно. Например, я мог бы ссылаться на имя нулевого изображения переменная и это вызовет ошибку, но если я НГ-если и проверить, если это null, это все хорошо. Если бы я сделал ng-show, ошибка все равно сработала бы.

одна важная вещь, чтобы отметить о ng-if и ng-show является то, что при использовании элементов управления формой лучше использовать ng-if потому что он полностью удаляет элемент из dom.

это различие важно, потому что если вы создаете поле ввода с required="true" и затем установить ng-show="false" чтобы скрыть его, Chrome выдаст следующую ошибку, когда пользователь попытается отправить форму:

An invalid form control with name='' is not focusable.

причина в том, что поле ввода присутствует, и это required но так как это скрытый хром не может сосредоточиться на нем. Это может буквально сломать ваш код, так как эта ошибка останавливает выполнение скрипта. Так что будьте осторожны!

@Gajus Kuizinas и @CodeHater верны. Здесь я просто приведу пример. Пока мы работаем с ng-if, если присвоенное значение false, то все html-элементы будут удалены из DOM. и если присвоено значение true, то элементы html будут видны на DOM. И объем будет отличаться от родительской. Но в случае ng-show он будет просто показывать и скрывать элементы на основе назначенного значения. Но он всегда остается в доме. Только видимость изменения согласно назначенному значению.

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

надеюсь, этот пример поможет вам в понимании областей. Попробуйте дать ложные значения ng-show и ng-if и проверить DOM в консоли. Попробуйте ввести значения в поля ввода и обратите внимание на разницу.

<!DOCTYPE html>

Привет Plunker!

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

то, что

1. ng-if if false удалит элементы из DOM. Это означает, что все ваши события, директивы, прикрепленные к этим элементам, будут потеряны. Например, ng-click к одному из дочерних элементов, когда ng-if оценивается как false, этот элемент будет удален из DOM и снова, когда он истинен, он будет воссоздан.

2. ng-show / ng-hide не удаляет элементы из DOM. Он использует стили CSS (. ng-hide), чтобы скрыть/показать элементы.Таким образом, ваши события, директивы, которые были привязаны к детям, не пропадут.

3. ng-if создает дочернюю область, а ng-show / ng-hide-нет.

отметить, то, что случилось со мной сейчас: ng-show скрывает контент через css, да, но это привело к странным сбоям в div, которые должны быть кнопками.

У меня была карта с двумя кнопками внизу, и в зависимости от фактического состояния одна из них обменивается с третьей, например, кнопкой редактирования с новой записью. Используя ng-show=false, чтобы скрыть левую (присутствующую сначала в файле), случилось так, что следующая кнопка оказалась с правой границей за пределами карты. НГ-если исправляет это не код вообще. (Просто проверено здесь, Если есть некоторые скрытые сюрпризы, используя ng-if вместо ng-show)

ng-show и ng-hide работают в противоположном направлении. Но разница между ng-hide или ng-show с ng-if есть,если мы используем ng-if, то элемент будет создан в dom, но с элементом ng-hide/ng-show будет полностью скрыт.

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom. 

одно интересное различие в ng-if и ng-show:

безопасность

DOM элементы, присутствующие в ng-если блок не будет отображаться в случае его значения как false

где, как и в случае ng-show, пользователь может открыть окно элемента Inspect и установить его значение в TRUE.

и с воплем, все содержимое, которое должно было быть скрыто, отображается, что является нарушением безопасности. :)