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

  1. Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

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

  2. 前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  3. 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. AngularJs:Service、Factory、Provider依赖注入使用与区别

           本教程使用AngularJS版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/       ...

  5. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  6. AngularJS:何时应该使用Directive、Controller、Service?【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...

  7. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  8. AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

  9. AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

随机推荐

  1. 机械大楼电梯控制项目软件 -- github团队组建

    目前在Github网站上建立了机械大楼电梯控制项目软件的软件仓库(Repository),提供了软件功能需求说明文档和Automation Studio程序模板.地址为 https://github. ...

  2. left join 条件区别

    t1: num | name-----+------ 1      | a 2      | b 3      | c t2: num | value-----+------- 1  | xxx 3 ...

  3. docker 镜像导入导出

    导出(Export) Export命令用于持久化容器(不是镜像).所以,我们就需要通过以下方法得到容器ID: sudo docker ps -a 接着执行导出: sudo docker export ...

  4. ubuntu 安装VmTool

    VM tools 是Vmware的一组工具.主要用于虚拟主机显示优化与调整,另外还可以方便虚拟主机与本机的交互,如允许共享文件夹,甚至可以直接从本机向虚拟主机拖放文件.鼠标无缝切换.显示分辨率调整等, ...

  5. Mininet在创建拓扑的过程中为什么不打印信息了——了解Mininet的log系统

    前言 写这篇博客是为了给我的愚蠢和浪费的6个小时买单! 过程原因分析 我用Mininet创建过不少拓扑了,这次创建的拓扑非常简单,如下图,创建拓扑的代码见github.在以前的拓扑创建过程中,我都是用 ...

  6. 常用hadoop web

    http://localhost:50070 Hadoop服务 http://localhost:8088/ 集群中的所有应用程序 http://localhost:16010 hbase

  7. Linux sysinfo获取系统相关信息

    Linux中,可以用sysinfo来获取系统相关信息. #include <stdio.h> #include <stdlib.h> #include <errno.h& ...

  8. window 运行指令(1)

    添加或删除程序 appwiz.cpl 管理工具 control admintools Bluetooth文件传送向导 fsquirt 计算器 calc 证书管理控制台 certmgr.msc 字符映射 ...

  9. 遍历Arraylist的方法:

    遍历Arraylist的几种方法: Iterator it1 = list.iterator();        while(it1.hasNext()){            System.out ...

  10. Android之Activity跳转

    简述 如果把每个activity看成一个页面的话,那么activity之间的跳转和页面的之间的跳转基本上是一样的.首先需要监听一个事件,当这个事件发生的时候,就进行跳转.html中有个<a sr ...