码迷,mamicode.com
首页 > Windows程序 > 详细

野兽的Angular Api 学习、翻译及理解 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

时间:2015-11-11 23:34:51      阅读:568      评论:0      收藏:0      [点我收藏+]

标签:

野兽的 ng api 学习 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

 

ngHref

在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 Api 学习、翻译及理解 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

标签:

原文地址:http://www.cnblogs.com/ys-ys/p/4957628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!