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}}

通过上面三个指令分别在触发复制/剪切/粘帖时我们可以执行我们自定义的事件了

时间: 2024-08-28 16:11:30

Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste的相关文章

野兽的Angular Api 学习、翻译及理解 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

野兽的 ng api 学习 - - ngHref.ngSrc.ngCopy/ngCut/ngPaste ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用代码: <a ng-href="http://www.xxxxx.com">点击进入xxxxx网站</a> 如果href绑定的url是动态绑定(从就是代码中绑定到

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

野兽的 ng api 学习 - - ngIf.ngSwitch.ngHide/ngShow 在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作. 格式:ng-if=“value” value:表达式  返回结果为boolean类型. 使用代码:

野兽的Angular Api 学习、翻译及理解 - - ngReadonly、ngSelected、ngDisabled

野兽的 ng api 学习 - - ngReadonly.ngSelected.ngDisabled ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失.这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息. 格式:ng-readonly=“value” value:表达式   结果为

野兽的Angular Api 学习、翻译及理解 - - ngChange、ngChecked、ngClick、ngDblclick

野兽的 ng api 学习 -- ngChange.ngChecked.ngClick.ngDblclick ngChange 当用户更改输入时,执行给定的表达式.表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同. 格式:ng-change=”value” value: 表达式. 使用代码: <div ng-app="Demo"> <div ng-controller="testCtrl&quo

angular之$watch、$watchGroup、$watchCollection

1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带当前scope为参数的函数 - `string`: Evaluated as {@link guide/expression expression} - `function(scope)`: called with curre

野兽的Angular Api 学习、翻译及理解 - - $anchorScroll、$controller、$document

野兽的ng api学习 -- $anchorScroll.$controller.$document $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过$anchorScrollProvider.disableAutoScrolling()禁用. 依赖:$window   $location   $rootScope 使用:$anchorScrol

野兽的Angular Api 学习、翻译及理解 - - ngList、ngRepeat、ngModelOptions

野兽的 ng api 学习 - - ngList.ngRepeat.ngModelOptions ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式  通过这个值分隔字符串. 使用代码: <div ng-app="Demo"> <div ng-controller="demoCtrl"> <input ng-mode

野兽的Angular Api 学习、翻译及理解 - - ngCloak、ngController、ngInit、ngModel

野兽的 ng api 学习 -- ngCloak.ngController.ngInit.ngModel ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   class=“ng-cloak“ 使用代码: <div ng-cloak>{{'Hello World'}}</div> <div class="ng-cloak&

angular之$broadcast、$emit、$on传值

文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"