使用Angular的ng-if

Question

查看Mastering Web Application Development in Angular，如果表达式为ng-if，我尝试使用<div>指令不显示false。

HTML

<div ng-controller="MyCtrl">
    <div ng-if="showSecret">Secret</div>
</div>

的JavaScript

var myModule = angular.module('myApp', []);

function MyCtrl($scope) {  
    $scope.showSecret = (function() { 
        return false;
    })();
}

但是，看着这个JsFiddle（http://jsfiddle.net/64GCp/2/），我看到Secret被渲染了。为什么呢？

Answer 1

看起来您使用的是v1.0.1，而文档here未显示ngIf文档。

我看到的第一个实例是版本1.2.0中的here

更改库版本有效：http://jsfiddle.net/64GCp/4/

Answer 2

隐藏和显示的选项包括ng-show或ng-hide及更高版本Angularjs 1.2.0 + ngIf

http://jsfiddle.net/64GCp/3/

所有指令都在DOM上执行，因此 ngShow 或 ngIf 将同等执行。

我个人在页面中亲自使用过 ngShow （我决定使用“大数字”来强调歧义）并在包括IE8在内的所有浏览器中对其进行测试而没有任何问题。

本书可能指的是页面的大小不会改变，因为所有ngShow / ngHide都是隐藏元素：

ng-show输出

  <div ng-show="showSecret" style="display: none;">Secret</div> 

虽然ngIf只发表评论：

ng-if output

  <!-- ngIf: checked -->

重要提示：添加ng-if的第一个稳定版本是角度1.2.0，确保您在使用此版本之前拥有此版本或更高版本。

请理解2件事，Angular正在迅速改变框架，浏览器也是一个很好的做法，搜索基准/版本来确认或丢弃功能。指令的内部功能也可能随着时间的推移而改变。例如，Angular团队宣布他们在版本2.0中放弃了IE8支持。

Answer 3

您使用的角度版本不支持ng-if。使用较新的版本。请参阅我的小提琴：//jsfiddle.net/SdYH5/