时间戳

首页 > 解决方案 > 为什么一个未渲染的元素表现得好像它已经被渲染了？

angularjs - 为什么一个未渲染的元素表现得好像它已经被渲染了？

问题描述

我对 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

e

但是......当我查看网络选项卡时，有一个获取图像的请求：

我认为如果元素没有被渲染，它不会以任何方式或形式起作用，因为它不存在......为什么在这种情况下浏览器会获取图像？

您可以在此处查看 plnkr上的工作代码，您必须点击F12查看控制台上的错误。

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

标签： angularjs

解决方案

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属性。

推荐阅读