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比较奇葩,收藏只有二者一半 ...
随机推荐
- Android传感器编程带实例(转)
源:http://www.cnblogs.com/xiaochao1234/p/3894751.html 看了程序人生 网站的 编程高手的编程感悟 深有感触,好像也是一个android 程序员写的,推 ...
- Application对象
Application对象报讯是应用程序参数的额,多个用户可以共享一个Application.用于启动和管理ASP.NET应用程序. Count 属性 获取Application对象变量的个数,集合 ...
- UIView你知道多少
转载自:http://www.cnblogs.com/likwo/archive/2011/06/18/2084192.html 曾经有人这么说过,在iphone里你看到的,摸到的,都是UIVie ...
- inline-block的升级float:浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Chapter 1 First Sight——1
My mother drove me to the airport with the windows rolled down. 随着窗户渐渐摇下,我妈妈开着车送我去机场. It was seventy ...
- c# toolstrip控件怎么把左边的几个小点去掉??
选中你的toolstrip 然后属性属性中有个 GripStyle 设置Hidden
- Android 之 ServiceManager与服务管理
ServiceMananger是android中比较重要的一个进程,它是在init进程启动之后启动,从名字上就可以看出来它是用来管理系统中的service.比如:InputMethodService. ...
- hibernate--ID生成策略--XML
xml生成id, a) generator b) 常用4个: native, uuid, identity, sequence 1. 新建java项目, 引入hibernate, junit(use ...
- php 中的魔术方法-----“事件方法”
来源:http://lornajane.net/posts/2012/phps-magic-__invoke-method-and-the-callable-typehint php 中的这个对象 , ...
- ios开发环境配置及cordova安装与常用命令
一.ios开发环境配置 1.首先要有台Mac Book,如果有Mac Book,跳过步骤2.3.4,如果没有,执行步骤2.3.4: 2.下载并安装VMware Workstation,最好是下最新版本 ...