关于ng-if和ng-show需要注意的一件重要的事情是，当使用表单控件时，最好使用ng-if，因为它完全从dom中删除了元素。

这个区别很重要，因为如果你创建了一个required="true"的输入字段，然后设置ng-show="false"来隐藏它，当用户试图提交表单时，Chrome会抛出以下错误:

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

原因是输入字段是存在的，它是必需的，但由于它是隐藏的Chrome不能关注它。这可能会破坏您的代码，因为此错误会停止脚本执行。所以要小心!

@EdSpencer是正确的。如果您有很多元素，并且使用ng-if只实例化相关的元素，则可以节省资源。 @CodeHater也有点正确，如果你要经常删除和显示一个元素，隐藏它而不是删除它可以提高性能。

我发现ng-if的主要用例是，如果内容是非法的，它允许我清晰地验证和消除元素。例如，我可以引用一个空图像名称变量，这将抛出一个错误，但如果我ng-if并检查它是否为空，这一切都很好。如果我执行ng-show，错误仍然会触发。

ng-if指令从页面中删除内容，ng-show/ng-hide使用CSS的display属性隐藏内容。

如果您想使用:first-child和:last-child伪选择器来设置样式，这是非常有用的。

事实上，ng-if指令与ng-show指令不同，它创建了自己的作用域，导致了有趣的实际差异:

angular.module('app', []).controller('ctrl', function($scope){ $scope.delete = function(array, item){ array.splice(array.indexOf(item), 1); } }) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='ctrl'> <h4>ng-if:</h4> <ul ng-init='arr1 = [1,2,3]'> <li ng-repeat='x in arr1'> {{show}} <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button> <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button> <button ng-if='show' ng-click='show=!show'>No</button> </li> </ul> <h4>ng-show:</h4> <ul ng-init='arr2 = [1,2,3]'> <li ng-repeat='x in arr2'> {{show}} <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button> <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button> <button ng-show='show' ng-click='show=!show'>No</button> </li> </ul> <h4>ng-if with $parent:</h4> <ul ng-init='arr3 = [1,2,3]'> <li ng-repeat='item in arr3'> {{show}} <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button> <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button> <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button> </li> </ul> </div>

在第一个列表，on-click事件，显示变量，从内部/自己的作用域，被改变了，但ng-if正在观察从外部作用域同名的另一个变量，所以解决方案不工作。对于ng-show，我们只有一个show变量，这就是它工作的原因。要修复第一次尝试，我们应该通过$parent.show引用show from parent/outer scope。

关于ng-if和ng-show需要注意的一件重要的事情是，当使用表单控件时，最好使用ng-if，因为它完全从dom中删除了元素。

这个区别很重要，因为如果你创建了一个required="true"的输入字段，然后设置ng-show="false"来隐藏它，当用户试图提交表单时，Chrome会抛出以下错误:

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

原因是输入字段是存在的，它是必需的，但由于它是隐藏的Chrome不能关注它。这可能会破坏您的代码，因为此错误会停止脚本执行。所以要小心!

ng-if if false will remove elements from DOM. This means that all your events, directives attached to those elements will be lost. For example, ng-click to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and again when it is true it is recreated. ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles (.ng-hide) to hide/show elements .This way your events, directives that were attached to children will not be lost. ng-if creates a child scope while ng-show/ng-hide does not.