javascript - ng-if ="true"+ data-ng-if ="true"计算结果为 false？

Question

事实是，如果您在 htmlng-if="truthyValue" 和 data-ng-if="truthyValue" > 元素使用 angularJS +1.6，受影响的元素将不会在 DOM 中呈现。即使您将 ng-if 和 data-ng-if 与 boolean true 一起使用也是如此。

---

有人知道为什么会这样吗？

Answer 1

这个答案需要多次引用 AngularJS 的 directive documentation .

---

这是因为 AngularJS HTML 模板是编译的:

For AngularJS, "compilation" means attaching directives to the HTML to make it interactive.

在编译期间，模板指令会经历一个称为规范化的过程，该过程涉及将不区分大小写的 HTML 名称更改为 AngularJS 中使用的驼峰命名法，这遵循以下过程:

1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

在这个过程之后，您可以看到您将两个 ngIf 指令附加到同一个 HTML 元素，然后这些指令会干扰(它对两次出现的ng-if 而不是 ng-if 和 data-ng-if 是您的网络浏览器丢弃了其中一个 ng -ifs 如果有两个而不是它们都到达 AngularJS 编译器)。

---

因此，避免这种情况发生的解决方案是不要在 AngularJS 规范化为同一事物的 HTML 中使用多个指令。