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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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-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.

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