Angular - - 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 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste的更多相关文章
- AngularJs ngHref、ngSrc、ngCopy/ngCut/ngPaste
ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- 【JavsScript】JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...
- JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Angular - - ngCloak、ngController、ngInit、ngModel
ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak ...
- angular之$watch、$watchGroup、$watchCollection
1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须 ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- 前端框架Angular、react、vue在github上的数据统计-2018-05
2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...
随机推荐
- zf-关于收费统计没出来监利县的问题
这个问题一看就知道跟存储过程有关,所以我直接去后台实现类找到了这个的存储过程 存储过程里第一句就是quhua_code 从 select 开始 就是查询出 4个地方的名字 然后在把这查询出的数据给@ ...
- zf-关于注册码过期
Webroot-index.jsp下 少写了个函数 导致登陆进去不能弹出注册码过期的对话框,函数如下 window.onload = function() { <ww:iterator valu ...
- 绑定网关mac,防arp攻击
netsh i i show innetsh -c i i add neighbors 16 192.168.1.1 08-57-00-51-19-7c
- whm 设置共享IP
点击 Main >>Resellers>>resellers centers (manages ressellers center's IP有几个IP代表几个)
- Chapter 1 First Sight——2
"Bella," my mom said to me — the last of a thousand times — before I got on the plane. &qu ...
- 只有mdf 没有 日志 恢复数据库
1.先建一个与你要恢复的数据库名称一样的数据库.2.停止sql server,把你的数据库替换这个数据库.3.重启sql server,把数据库设置为紧急状态. sp_configure 'allo ...
- Android WifiDisplay分析一:相关Service的启动
网址:http://www.2cto.com/kf/201404/290996.html 最近在学习Android 4.4上面的WifiDisplay(Miracast)相关的模块,这里先从WifiD ...
- Selenuim+Python之元素定位总结及实例说明
网页自动化最基本的要求就是要定位到各个元素,然后才能对该元素进行各种操作(输入,点击,清除,提交等),所以笔者今天来总结下Selenuim+Python最基本的几种定位方式及实例说明,希望能帮助到大家 ...
- 转 Could not create the view: An unexpected exception was thrown.问题解决
转自:http://blog.csdn.net/shuangzixing520/article/details/35225105 今天打开Myeclipse10的时候,发现server窗口出现一堆问题 ...
- Android MulticastSocket IP组播
MulticastSocket是对等的关系,也就是他们通过IP多点组播保留的地址来相互接收在这个组的Socket发送的消息 我写了一个例子,MultiSocketB是一个service,用于先接收再发 ...