为什么未渲染的元素表现得像渲染一样？

Question

我对Angular JS的这种行为感到有些困惑。

如果表达式的计算结果为false，则Angular.js'ng-if将不会呈现元素，如果文档是任何内容。我在我的html模板中有这段代码：

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

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

呈现此模板时，我无法按预期看到开发人员工具上的img元素或p元素：

但是......当我查看网络标签时，会有一个获取图片的请求：

我认为如果元素没有呈现，它将无法以任何方式或形式运行，因为它不存在...为什么浏览器在这种情况下获取图像？

您可以在plnkr here上看到工作代码，您必须点击F12才能在控制台上观看错误。

^{我知道使用ng-src= {{ }}代替src={{ }}可以解决在绑定数据之前使用未解析的表达式获取img src的问题，但是，这个问题更多地涉及为什么{{ 1}}并未首先停止请求}

Answer 1

AngularJS需要少量时间来处理您的标记。因此，当您的页面加载时，浏览器会尝试处理标记。它看到了这个：

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

但是，到目前为止，还没有加载AngularJS，AngularJS指令也没有意义。浏览器尝试加载位于以下文字网址的图片：{{ imgPath }}，网址编码器将转换为%7B%7B%20imgPath%20%7B%7B，这将失败（显然）。但是，AngularJS尚未加载。

一旦AngularJS最终加载，它将通过DOM并应用ngIf指令并删除该节点。

这就是您要使用ngSrc的原因。这将阻止图像请求，因为浏览器不理解ng-src指令，并且不会将其视为src属性。