ng-if ="true"+ data-ng-if ="true"；评估为假? [英] ng-if="true" + data-ng-if="true" evaluates to false?

问题描述

事实是，如果您在 html 内使用 ng-if ="truthyValue" 和 data-ng-if ="truthyValue" >使用 angularJS +1.6的元素，受影响的元素将不会在 DOM 中呈现.即使将 ng-if 和 data-ng-if 与布尔值 true 一起使用，也是如此./p>

---

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

解决方案

此答案采用AngularJS的的多个引号指令文档.

---

这样做的原因是AngularJS HTML模板是编译的:

对于AngularJS，编译"是指在HTML上附加指令以使其具有交互性.

在编译过程中，模板指令经历一个称为 Normalization 的过程，该过程涉及将HTML大小写不敏感的名称更改为AngularJS中使用的camelCase名称，该过程遵循以下过程:

从元素/属性的前面
1. 剥离 x-和 data-.
2. 将:，-或 _ 分隔的名称转换为camelCase.

在此过程之后，您会看到在同一HTML元素上附加了两个 ngIf 指令，这些指令会相互干扰(其在两次出现的情况下均有效的原因 ng-if 而不是 ng-if 和 data-ng-if 是因为您的网络浏览器会丢弃其中的 ng-if ，如果有两个而不是两个都到达AngularJS编译器.

---

因此，解决此问题的方法是不要在您的HTML中使用多个指令，而AngularJS会将它们标准化为同一件事.

The fact is that if you use ng-if="truthyValue" and data-ng-if="truthyValue" inside an html element using angularJS +1.6, the affected element won't render in the DOM. This is true even if you use ng-if and data-ng-if with the boolean true.

---

Does anybody knows why does this happen ?

解决方案

This answer takes multiple quotes of AngularJS's directive documentation.

---

The reason for this is that AngularJS HTML templates are compiled:

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

During compilation, template directives undergo a process called Normalization which involves changing HTMLs case-insensitive names to the camelCase names used in AngularJS, this follows the following process:

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

After this process you can see that you'll have two ngIf directives attached to the same HTML element, these then interfere (the reason it works for two occurrences of ng-if but not an ng-if and an data-ng-if is that your web browser discards one of the ng-ifs if there are two rather than them both reaching the AngularJS compiler).

---

Thus the solution for this not to occur is don't use multiple directives in your HTML which AngularJS normalizes to the same thing.

这篇关于ng-if ="true"+ data-ng-if ="true"；评估为假?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！