Angular 学习系列 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste
2016-02-15 00:00
489 查看
ngHref
在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面。
格式:ng-href=”value”
value:表达式。
使用代码:
如果href绑定的url是动态绑定(从就是代码中绑定到view),使用的是href,那么就会出现href 绑定出现错误,因为angular还未对html上的表达式进行编译,原先就用href绑定的值最后还是href="{{hash}}" ,而如果用ng-href,那么angular将会在编译完后去绑定url,当然这时候你看到的a标签属性上同时存在ng-href和href,后面的href是解析出来的,并且2个属性上的url值都正确绑定。
ngSrc
在Angular里面,src标签上使用 {{hash}} 标记是错误的。在Angular替换{{hash}}内的表达式之前,浏览器将会使用包括 {{hash}}文本的url。ngSrc解决了这个问题。
错误的使用方式:
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
正确的使用方式:
ngSrc与ngHref同理。
ngCopy/ngCut/ngPaste
通过上面三个指令分别在触发复制/剪切/粘帖时我们可以执行我们自定义的事件了。
在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面。
格式:ng-href=”value”
value:表达式。
使用代码:
<a ng-href="http://www.xxxxx.com">点击进入xxxxx网站</a>
如果href绑定的url是动态绑定(从就是代码中绑定到view),使用的是href,那么就会出现href 绑定出现错误,因为angular还未对html上的表达式进行编译,原先就用href绑定的值最后还是href="{{hash}}" ,而如果用ng-href,那么angular将会在编译完后去绑定url,当然这时候你看到的a标签属性上同时存在ng-href和href,后面的href是解析出来的,并且2个属性上的url值都正确绑定。
ngSrc
在Angular里面,src标签上使用 {{hash}} 标记是错误的。在Angular替换{{hash}}内的表达式之前,浏览器将会使用包括 {{hash}}文本的url。ngSrc解决了这个问题。
错误的使用方式:
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
正确的使用方式:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
ngSrc与ngHref同理。
ngCopy/ngCut/ngPaste
<input ng-copy="copy=true" ng-init="copy=false; value='copy me'" ng-model="value">{{copy}} <input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">{{cut}} <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>{{paste}}
通过上面三个指令分别在触发复制/剪切/粘帖时我们可以执行我们自定义的事件了。
相关文章推荐
- Angular 学习系列 - - ngList、ngRepeat、ngModelOptions
- Angular 学习系列 - - angular.identity和angular.noop
- Angular 学习系列 - - $rootScope.Scope
- 每个架构师都应该研究下康威定律
- Tomcat添加MySQL数据库配置
- org.apache.commons.lang3.StringUtils中常用方法
- linux命令ps aux|grep xxx详解
- Linux ssh -bash: ulimit: 问题解决
- 【Kafka】运维
- 运行hadoop自带的wordcount例子
- 编译hadoop自带的wnordcout例子
- OpenTSDB logo开源监控系统 OpenTSDB
- Linux 系统性能优化
- linux挂载ssd硬盘
- Linux运维初级教程(四)shell简介
- [小技巧] Linux 下转换图片到 gif
- Adding swap space on linux system
- linux xargs详解
- CSU 1556 Pseudoprime numbers
- Linux 学习树之基础20160214