Angularjs 为什么一个未渲染的元素的行为就好像它已经被渲染过一样？

我对角JS的这种行为有点困惑

如果表达式的计算结果为false，并且文档有任何依据，Angular.js'将不会呈现元素。我的html模板中有以下代码：

<div ng-if="false">
  <img src="{{ imgPath }}" />
  <p>This block is not rendered</p>
</div>

// In the controller
$scope.imgPath = "/invalid/image/path";

不渲染此块

//在控制器中
$scope.imgPath=“/invalid/image/path”；

当呈现此模板时，我无法按预期看到开发者工具上的

img

元素或

p

元素：

然而。。。当我查看网络选项卡时，有一个获取图像的请求：

我认为如果元素不被渲染，它将不会以任何方式或形式运行，因为它不存在。。。在这种情况下，浏览器为什么要获取图像

您可以在上看到工作代码，您必须点击

F12

才能在控制台上查看错误

---

---

我知道使用

ng src={{}}

而不是

src={{}}

可以解决在绑定数据之前使用未解析表达式获取img src的问题，但是，这个问题更多地涉及为什么

ng如果

一开始就没有停止请求

那么AngularJS会花一点时间来处理标记。因此，当页面加载时，浏览器会尝试处理标记。它认为：

<div ng-if="false">
  <img src="{{ imgPath }}" />
  <p>This block is not rendered</p>
</div>

不渲染此块

但是，到目前为止，AngularJS尚未加载，AngularJS指令也没有任何意义。浏览器尝试加载位于以下文本URL处的图像：

{{imgPath}

，URL编码器将其转换为

%7B%7B%20imgPath%20%7B%7B

，这将失败（显然）。不过，AngularJS尚未加载

一旦AngularJS最终加载，它将遍历DOM并应用

ngIf

指令并删除节点

---

这就是为什么要使用

ngSrc

。这将阻止图像请求，因为浏览器不理解

ng src

指令，也不会将其视为

src

属性。

我相信元素已创建，然后

ng if

将被计算，如果计算结果为false，元素将被删除。元素实际上会存在一个短暂的时刻，这是导致尝试检索图像的原因。您需要了解

ng如果
只不过是角度指令，那么待处理元素应该在DOM中。