ngIf

ng-if 类似于指令 ng-show 但插入或移除从 DOM 元素而不是简单地隐藏它。Angular 1.1.5 引入了 ng-If 指令。你可以使用 1.1.5 版本以上的 ng-if 指令。这很有用，因为 Angular 不会处理已移除的 ng-if 中的元素的摘要，从而减少了 Angular 的工作量，尤其是对于复杂的数据绑定。

与 ng-show 不同，ng-if 指令创建一个使用原型继承的子范围。这意味着在子范围上设置原始值将不适用于父范围。要在父作用域上设置基元，必须使用子作用域上的 $parent 属性。

JavaScript

angular.module('MyApp', []);

angular.module('MyApp').controller('myController', ['$scope', '$window', function myController($scope, $window) {
    $scope.currentUser= $window.localStorage.getItem('userName');
}]);

视图

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

DOM 如果 currentUser 不是未定义的

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <!-- ng-if: !currentUser -->
</div>

DOM 如果 currentUser 未定义

<div ng-controller="myController">
    <!-- ng-if: currentUser -->
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

工作实例

功能承诺

ngIf 指令也接受函数，逻辑上要求返回 true 或 false。

<div ng-if="myFunction()">
    <span>Span text</span>
</div>

仅当函数返回 true 时才会显示范围文本。

$scope.myFunction = function() {
    var result = false;
    // Code to determine the boolean value of result 
    return result;
};

与任何 Angular 表达式一样，该函数接受任何类型的变量。