ng-src 和 ng-href的妙用
来源:互联网 发布:淘宝如何查购买记录 编辑:程序博客网 时间:2024/05/18 01:13
文章参考
http://www.tuicool.com/articles/jIV7rm
五、特殊的ng-src和ng-href
在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下图:
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) 最后生成了我们在最终视图。
可以看到,ng框架是在DOMcontent加载完毕后才开始发挥作用。假如我们模板中有一张图片如下:
<img src=”{{imgUrl}}” />
那么在页面开始加载到ng编译完成之前,页面上会一直显示一张错误的图片,因为路径{{imgUrl}}还未被替换,就像这样:
为了避免这种情况,我们使用ng-src指令,这样在路径被正确得到之前就不会显示找不到图片。同理,<a>标签的href属性也需要换成ng-href,这样页面上就不会先出现一个地址错误的链接。
顺着这个思路再多想一点,我们在模板中使用{{}}显示数据时,在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式?确实是这样。为了避免这个,ng中有一个与{{}}等同的指令:ng-bind,同样用于单向绑定,在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样你可能不但没舒心反而更纠结了,{{}}那么好用易理解,还不能用了不成?好消息是我们依然可以使用。因为我编写的是单页面应用,页面只会在加载index.html的时候出这个问题,只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的,就可以放心使用{{}}了。
- ng-src 和 ng-href的妙用
- ng-src 和 ng-href的妙用
- ng-src与ng-href
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
- ng-init的妙用
- angular——ng-bind,ng-cloak,ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果
- Augular中 src和ng-src的区别
- 简单理解src和ng-src
- src 与 ng-src 的区别
- angular的自定义属性和ng-href属性
- ng-class、ng-style、ng-href、ng-attr-title
- ng-if、ng-show和ng-hide指令的区别
- ng-repeate 和ng-show的用法
- {{}}、ng-bind和ng-model的区别
- ng-if和ng-show的区别
- ng-src指令
- AngularJS 设置img (ng-src 和 src 区别)
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
- 线性代数矩阵的投影
- -webkit-line-clamp下多行文字溢出点点点...显示实例页面
- C语言中位操作
- angularjs ng-bind-html 指令 对html标签转译
- 无人驾驶汽车的体系结构
- ng-src 和 ng-href的妙用
- Android逆向实例笔记—记一第一次为Android程序写注册机(短信轰炸机)
- angularjs $q服务学习
- angular自定义服务 历史回退到“上一个页面”
- angularjs 排序入门学习
- git flow
- Linux中普通用户和ROOT用户对Java JDK的配置
- angularjs中全局变量 constant 和 value方法
- ionic 月份选择控件 ionic-monthpicker