您的位置:首页 > Web前端 > AngularJS

AngularJS自定义指令

2016-08-29 18:41 225 查看

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


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

创建指令

过几天更新
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息