简单理解src和ng-src
来源:互联网 发布:警惕网络陷阱教学设计 编辑:程序博客网 时间:2024/06/02 21:18
作者:徐海峰
链接:https://www.zhihu.com/question/48128981/answer/109289707
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
因为 ng-src 指令是直接 $observe 'ng-src' 的,所以必须是表达式,如果写成 `ng-src=“vm.url”` 指令会生成 src=“vm.url”
知道原理后如果你就不想多写{{}} 那就自定义指令 xxxSrc 改造下就可以了。
链接:https://www.zhihu.com/question/48128981/answer/109289707
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
src 是 HTML的属性,{{}} 是 ng 的表达式, 表达式可用于很多地方,包含属性,所以直接 src="{{vm.url}}" 其实就是使用ng的表达式给属性赋值,这种做法的缺点是当第一次加载模板的时候浏览器会去请求 “{{vm.url}}” 的地址,当ng编译模板后把 {{vm.url}} 替换成对应的URL后会再次请求真实的地址,所以为了避免第一次无效的请求,ng 自带了ngSrc 指令,其实和ngHref的原理类似。
想要探索为啥直接写 ng-src=“vm.url” 不行就需要看文档或者源码: angular.js/attrs.js at master · angular/angular.js · GitHub因为 ng-src 指令是直接 $observe 'ng-src' 的,所以必须是表达式,如果写成 `ng-src=“vm.url”` 指令会生成 src=“vm.url”
attr.$observe('ng-src',function(value){ attr.$set(name, value);})
如果想要支持,把ngSrc指令改成下面这样就可以了
scope.$watch(attr[normalized], function(value) { ...});
知道原理后如果你就不想多写{{}} 那就自定义指令 xxxSrc 改造下就可以了。
简单的说:
1、资源url是个常量,那么就用src,没毛病;2、资源url是个(包含)变量,那么就用ng-src + {{}},可以规避第一次请求404的问题。
阅读全文
1 0
- 简单理解src和ng-src
- ng-src 和 ng-href的妙用
- ng-src 和 ng-href的妙用
- AngularJS 设置img (ng-src 和 src 区别)
- Augular中 src和ng-src的区别
- ng-src指令
- ng-src与ng-href
- src 与 ng-src 的区别
- src
- src
- src
- img src 和src-data
- 理解url href src
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
- src/hwif和src/drv的区别
- src和href
- href和src区别
- 【WEB面试】如何理解href 和src的区别?
- eclipse版本和jdk对应关系
- 2017金马五校赛 F.A序列(LIS)
- 66. Plus One
- 剑指offer--面试题15:二进制中1的个数
- 钉钉微应用接入(企业内部开发)
- 简单理解src和ng-src
- Attention-based Extraction of Structured Information from Street View Imagery
- MPAndroidChart 画柱状图,线等统计图。
- shell read处理用户输入示例讲解
- 开发环境、生产环境、测试环境的基本理解和区别
- Machine Learning:Regression with multi variables
- PAT:1005. 继续(3n+1)猜想 (25)
- hibernate设置默认值
- 【怎样写代码】偷窥高手 -- 反射技术(四):深入窥视属性