AngularJS中ng-if未渲染元素为何表现得如同已渲染？

这确实是AngularJS里一个容易踩的小坑！我来给你理清楚背后的原因：

AngularJS的ng-if指令确实会在表达式为false时最终不渲染元素到DOM中，但这里有个关键的时间差问题：浏览器在加载HTML的时候，会先解析到<img src="{{ imgPath }}" />这行代码。此时Angular还没完成插值解析，浏览器会把{{ imgPath }}当作一个字面量的URL去发起请求——也就是你看到的那个无效路径请求。等Angular后续完成编译，发现ng-if="false"后才会把整个div块移除，但这时候图片请求已经发出去了。

解决办法 #

最直接也最符合AngularJS最佳实践的方案是使用ng-src指令代替原生的src属性：

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

ng-src的作用就是等待插值表达式解析完成后，再给img元素设置正确的src属性。而且因为整个块被ng-if控制，当表达式为false时，这个img元素根本不会进入DOM，自然也就不会触发任何图片请求。

补充说明 #

如果你好奇为什么原生src会有这个问题，本质是浏览器的HTML解析优先级高于Angular的模板编译优先级。浏览器会先尝试加载它看到的所有资源，Angular的动态指令（比如ng-if、ng-src）是在后续的digest循环里才会生效的。

内容的提问来源于stack exchange，提问作者LocustHorde