浅谈angularJS中src与ng-src属性的区别

图片初始化报错404的异常
浏览器解析html的顺序:
1) 浏览器加载静态HTML文件并解析为DOM；
2) 浏览器加载angular.js文件；
3) angular监听 DOMContentLoaded 事件，监听到时开始启动；
4) angular寻找ng-app指令，确定作用范围；
5) 找到app中定义的Module使用$injector服务进行依赖注入；
6) 根据injector服务创建compile服务用于编译；
7) $compile服务编译DOM中的指令、过滤器等；
8) 使用ng-init指令，将作用域中的变量进行替换；
9) 最后生成了我们的最终视图。
	因此,angular框架是在DOMcontent加载完毕后才开始发挥作用。假如我们模板中有一张图片如下：
<img src="{{imageUrl}}" />,浏览器解析HTML为DOM的时候会把src="{{imageUrl}}"原样解析,因此会报404的错误

	ng-src指令的本质是先从$scope的内存中获取ng-src的属性值,再赋值给src的属性值,因此当ng-src属性值获取到了url时,浏览器会解析为<img ng-src="url" src="url"></img>,最终其显示图片作用的还是src属性
	ng-src属性会做两件事:
第一步:先判断ng-src的属性值是否为null或者空字符串
第二步:如果不为null或者空字符串,就会把自己的值赋值给src属性
第三步:如果为null或者空字符串,就不会把自己的值赋值给src属性

案例
	1.<img ng-src="{{imageUrl}}"></img>	       //结果都为imageUrl
	浏览器会解析为	<img ng-src="{{imageUrl}}" src="{{imageUrl}}"></img>	

	2.<img ng-src="{{imageUrlOne}}" src="{{imageUrlTwo}}"></img>	//结果都为imageUrlOne
	浏览器会解析为	 <img ng-src="{{imageUrlOne}}" src="{{imageUrlOne}}"></img>	

	3.<img ng-src="" src="{{imageUrl}}"></img>	//结果都为imageUrl
	浏览器会解析为	 <img ng-src="" src="{{imageUrl}}"></img>	

注意:
	通常我们会使用<img ng-src="{{imageUrl}}"/>解决初始化时url报错的问题;但是这样有个弊端,当我们需要清空图片信息时,需要设置$scope.url=null或者空字符串,那么将无法影响src属性,也就是说图片仍然显示清空前的图片,但是提交无法提交上去,即:
//初始值
<img ng-src="{{imageUrl}}"/>
浏览器解析为:<img ng-src="{{imageUrl}}" src="{{imageUrl}}"/>
//对ng-src重新赋值为空
$scope.imageUrl="";
//结果
<img  src="{{imageUrl}}"/>