AngularJs ngHref、ngSrc、ngCopy/ngCut/ngPaste
2015-11-11 22:42
537 查看
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}}
通过上面三个指令分别在触发复制/剪切/粘帖时我们可以执行我们自定义的事件了。
相关文章推荐
- Web 组件 Header
- angularJS之$watch用法
- Ionic/Angular中Controllers探秘
- angular源码目录结构
- angularjs 如何处理checkbox
- AngularJs开发实践第一天(1)
- AngularJS快速入门
- angularJS实例之购物车
- angularjs 学习笔记
- angularJS的路由ngRoute
- angularJS的实战(视频)
- angularJS的directive
- AngularJS 中文资料+工具+库+Demo 大搜集
- angularJS源码目录结构和文件的解读
- Ionic 2.0 Alpha版本发布了
- AngularJS之移动开发
- 使用AngularJS构建大型Web应用,框架的建议
- angularjs factory,service,provider 自定义服务的不同
- angularjs中的$watch,对对象进行监视
- AngularJS中的$rootScope和$scope的结构与关系