AngularJS自定义指令

翻译 2016年08月29日 18:41:54

AngularJS自定义指令

注:本文翻译自官方angularjs1.5.0版本,水平有限,如有错误,欢迎指正。

什么是指令

指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。

匹配指令

在我们学会写自定义指令之前,我们需要知道Angular的HTML编译器是如何使用一个给定的指令的。

在下面的例子中,我们说 <input> 元素匹配了 ngModel 指令

<input ng-model="foo">

下面的 <input>元素同样匹配了ngModel

<input data-ng-model="foo">

指令类型

AngularJS提供四种自定义指令类型,包括元素(element)、属性(attributes)、类(class)和注释(comments)。下面的例子就是以上四种方式。

<my-dir></my-dir>
<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<!-- directive:my-dir exp -->

官方推荐使用属性或者元素的形式,可使低版本浏览器更容易识别。

创建指令

过几天更新

深究AngularJS——如何获取input的焦点(自定义指令)

我佛慈悲,取经(转载)请说明出处,以便更多人来本寺取得真经,阿弥陀佛1. 写在前面关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解...

angularJS学习之路(三十)---自定义指令---templateUrl

第一种写法: {{title}} the content i...

angularJs 自定义指令实现星级评分功能

自定义指令directive,相关功能 代码如下: var app = angular.module("app", []); app.controller('ctrl',function($scope...

angularJS 自定义指令 方法属性:compile、link

自定义指令还有compile属性,这个属性是一个function, 在其中可以更改dom元素,或者进行dom元素的事件绑定等。该function中可以返还一个function,返还的这个functio...

angularJS 自定义指令 属性:templateUrl

angularJS自定义指令中,设置指令的属性template可以定义需要的dom元素,除了使用template,还可以用templateUrl,这个templateUrl可以设置为一个页面的相对路径...

AngularJS:如何使用自定义指令来取代ng-repeat

引言本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能。对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS自定义指令
举报原因:
原因补充:

(最多只允许输入30个字)