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的更多相关文章

  1. AngularJs ngHref、ngSrc、ngCopy/ngCut/ngPaste

    ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...

  2. 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 的目的是 ...

  3. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  4. 【JavsScript】JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

    摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...

  5. JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. Angular - - ngCloak、ngController、ngInit、ngModel

    ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   ...

  7. angular之$watch、$watchGroup、$watchCollection

    1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须 ...

  8. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  9. 前端框架Angular、react、vue在github上的数据统计-2018-05

    2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...

随机推荐

  1. cakephp , the subquery (2)

    Cakephp 框架帮我们做了很多的工作,的确省了我们很多工作,提高了效率. 但是,碰到一些比较复杂的查询时,还是有些问题,官方的cookbook api 有说明一些详细的用法,但感觉还是不太够,有些 ...

  2. Android---->RelativeLayout相对对齐方式布局

    main.xml应用布局分析 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  3. bat 常用命令

    基础部分:======================================================================一.基础语法: 1.批处理文件是一个". ...

  4. Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'

    Eclipse ADT Unexpected exception 'Cannot run program' up vote 8 down vote favorite 4 I have installe ...

  5. Bootstrap环境及屏幕适配-(一)

    一.环境搭建 1.目录结构 需要引用的文件有, jquery.js.bootstrap.min.js 和 bootstrap.min.css 文件,下面看下在线的文档Hello Word <!D ...

  6. HDU 3255 Farming

    矩形面积并变形,一层一层的算体积 #include<cstdio> #include<cstring> #include<cmath> #include<ma ...

  7. Java——类谜题

    1.令人混淆的构造器 代码如下格式: public class Confusing { private Confusing(Object o) { System.out.println("O ...

  8. sping 对 hibernate进行事务管理--Annotation, xml, 大多数使用XML

    1. UserServiceTest.java: package com.bjsxt.service; import org.junit.Test; import org.springframewor ...

  9. uvc摄像头代码解析1

    一.FAQ 1.判断自己的摄像头是否支持uvc标准 输入lsusb //列出usb设备 [cpp]   Bus 001 Device 001: ID 1d6b:0002 Linux Foundatio ...

  10. iOS学习基本常识

    转发至:http://blog.sina.com.cn/s/blog_9266da3d010184i0.html 1. 了解main函数,  UIApplication是初始化程序的核心,它接受4个参 ...