AngularJs 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}}
通过上面三个指令分别在触发复制/剪切/粘帖时我们可以执行我们自定义的事件了。
AngularJs ngHref、ngSrc、ngCopy/ngCut/ngPaste的更多相关文章
- Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste
ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJs:Service、Factory、Provider依赖注入使用与区别
本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS:何时应该使用Directive、Controller、Service?【新手必看】
(这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...
- AngularJs学习笔记2-控制器、数据绑定、作用域
上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...
- AngularJS:何时应该使用Directive、Controller、Service?
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
随机推荐
- Pattern Recognition And Machine Learning读书会前言
读书会成立属于偶然,一次群里无聊到极点,有人说Pattern Recognition And Machine Learning这本书不错,加之有好友之前推荐过,便发了封群邮件组织这个读书会,采用轮流讲 ...
- 写个屏蔽百度搜索广告的Chrome插件
工作生活都用百度比较多,毕竟它是目前为止感觉最好的国内PC搜索引擎.我纵使已经差不多炼成了一眼过滤广告的眼力,但始终觉得碍眼,感觉还是写个插件把它屏蔽了吧.这个插件开发的门槛其实非常低,只是一开始做不 ...
- SQL基础之数据库快照
1.认识快照 如名字一样,数据库快照就可以理解为数据库某一时刻的照片,它记录了此时数据库的数据信息.如果要认识快照的本质,那就要了解快照的工作原理.当我们执行t-sql创建快照后,此时就会创建一个或多 ...
- vNext之旅(1):从概念和基础开始
ASP.NET vNext or .NET vNext? vNext在曝光以来绝大多数以ASP.NET vNext这样的的字眼出现,为什么这边会提及.NET vNext?原因是我认为ASP.NET只是 ...
- Collections的应用
Collection : 接口 Collections : 集合的工具类 Arrays (数组的工具类) 只能操作list集合 说出Collection和Collections 的区别 ...
- 简单解释CDATA
在网页源代码中,经常会看见如下代码: <![CDATA[其他内容]]>,其中其他内容一般是脚本. 为什么要用这个标签? 这个标签的意思是Character-Data,即字符数据. 目的,告 ...
- SharePoint Web Part Error – The Specified Solution Was Not Found
If you develop, release and add a SharePoint 2010 sandboxed solution web part to a page, then change ...
- SpringMVC自定义视图 Excel视图和PDF视图
一.自定义视图-Excel视图 1.Maven依赖 引入POI <dependency> <groupId>org.apache.poi</groupId> < ...
- Bootstrap表单布局样式
1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...
- java-原生爬虫机制源码
这是一个web搜索的基本程序,从命令行输入搜索条件(起始的URL.处理url的最大数.要搜索的字符串),它就会逐个对Internet上的URL进行实时搜索,查找并输出匹配搜索条件的页面. 这个程序的原 ...