AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
下面给一个例子综合的介绍一下这三个指令的用法:
在输入框中尝试输入:
姓名:
你输入的为: {{ firstName }}
从例子可以看出,先是在div中添加ng-app属性,表示这个div是AngularJS应用程序的所有者,这样接下来才可以继续使用其他的一些指令。
运行这个程序你会发现一个很有意思的事情,那就是你一修改输入框中的值,下面表达式就会马上随之发生改变,这就是ng-model的最大特点之一。
利用ng-model你就可以轻轻松松做数据同步了,不需要再编写复杂的js代码来实现这一效果,轻松利用ng-model就可以实现这一效果。
还有一个比较重要的指令就是:ng-repeat 这个指令最大的作用就是循环输出HTML元素,类似于js中的each功能。下面给出一个例子来介绍这个指令的具体用法:
使用 ng-repeat 来循环数组
-
{{ x }}
从上面这个例子就可以明显的看出,通过ng-repeat这个指令,实现了ul中li的遍历输出。
用法就是上面的“x in names”通过这个代码就可以实现类似于js中的in方法,把names中的值一个个取出来并放到x这个变量中,最后放到{{x}}中展示在HTML中去。
除了上面说到的一些系统指令外,AngularJS中还可以自己定义指令,下面就给大家介绍一下AngularJS是如何实现自定义指令的:
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
自定义的指令调用方法有多种,例如:
元素名、属性、类名、
注释这四种方法来实现自定义指令的调用。
下面就给大家介绍一下这些方法各自调用的例子:
元素名:<runoob-directive></runoob-directive>
属性:<div runoob-directive></div>
类名:<div class="runoob-directive"></div>
注释:
当然咱们也可以通过限制指令让它只能通过特定的方法触发。下面给出一个例子:
注意: 通过设置 restrict 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。
restrict 值可以是以下几种:E
作为元素名使用、A
作为属性使用、C
作为类名使用、M
作为注释使用。
restrict 默认值为 EA
, 即可以通过元素名和属性名来调用指令。利用自定义指令就可以实现很多自己想要的功能了,是不是非常方便呀。
如博客内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534