请注意，现在发生在我身上的一件事: 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. 

ngIf

ngIf指令根据表达式删除或重新创建DOM树的一部分。如果赋给ngIf的表达式求值为false，则该元素将从DOM中移除，否则该元素的克隆将重新插入DOM中。

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

当使用ngIf删除一个元素时，它的作用域将被破坏，当元素恢复时将创建一个新的作用域。ngIf中创建的作用域使用原型继承继承父作用域。

如果ngIf中使用ngModel绑定到父作用域中定义的JavaScript原语，那么对子作用域中变量的任何修改都不会影响父作用域中的值。

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

为了避免这种情况，并从子范围内更新父范围内的模型，使用一个对象:

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

或者，$parent变量引用父作用域对象:

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

ngShow指令根据提供给ngShow属性的表达式来显示或隐藏给定的HTML元素。通过在元素上删除或添加ng-hide CSS类来显示或隐藏元素。.ng-hide CSS类是在AngularJS中预定义的，它将显示样式设置为none(使用!重要标志)。

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

当ngShow表达式的值为false时，ng-hide CSS类被添加到元素的class属性中，使其变为隐藏状态。当为true时，ng-hide CSS类将从元素中移除，使元素不显示为隐藏状态。

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

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

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

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

ng-if和ng-show的一个有趣的区别是:

安全

如果ng-if块中的DOM元素值为false，则不会被呈现

在ng-show的情况下，用户可以打开检查元素窗口并将其值设置为TRUE。

随着一声巨响，原本要隐藏的全部内容都显示出来了，这是一个安全漏洞。：）