ng-if和data-ng-if指令之间的区别是什么

ng-if是AngularJS中的一个指令，用于在表达式或变量的值为false时移除HTML元素，这与ng-hide不同，后者只是将HTML元素从DOM中隐藏起来。

语法:

<element angular_directive=expression> Contents... </element>

还有一些其他的选项，其行为与ng-if相似。它们之间在功能上没有区别。

ng:if
ng_if
x-ng-if
data-ng-if

注意：最佳做法是只使用ng-if。

这些选项出现的背后原因是，在AngularJS中，我们使用驼峰大写来指代指令（例如：ngIf），但当我们在HTML中使用它时，由于HTML不区分大小写，我们使用破折号分隔的形式（例如：ng-if）或上述列表中提到的其他分隔符。所以AngularJS会对元素的标签进行规范化处理（这意味着它将分隔符的形式转换为骆驼大写），并找出该元素属于哪个指令。

例子1：这个例子使用“data-ng-if “指令。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the difference between ng-if
        and data-ng-if directives ?
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
  
        <input ng-model="var1">
  
        <div data-ng-if="var1">
            <h3>
                This will disappear if the value of
                input var1 is set to false and will 
                appear again when true
            </h3>
        </div>
    </center>
</body>
  
</html>

输出:
ng-if和data-ng-if指令之间的区别是什么？

实例2：本例使用“ng-if “指令。

<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the difference between ng-if
        and data-ng-if directives ?
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
  
        <input ng-model="var1">
  
        <div ng-if="var1">
            <h3>
                This will disappear if the value of
                input var1 is set to false and will 
                appear again when true
            </h3>
        </div>
    </center>
</body>
  
</html>