各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一个新的东西就是.AngularJS.跟着上一次的继续,今天给大家分享一下AngularJS指令.
AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS指令
AngularJS 指令是扩展的 HTML 属性,带有前缀ng-。
ng-app指令初始化一个 AngularJS 应用程序。
ng-init指令初始化应用程序数据。
ng-model指令把元素值(比如输入域的值)绑定到应用程序。
ng-app指令告诉 AngularJS,div元素是 AngularJS应用程序的"所有者"。
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
数据绑定
栗子:俩文本是通过ng-model指令同时指出的
重复 HTML 元素
ng-repeat指令会重复一个 HTML 元素:
ng-repeat用在一个对象数组上.
AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。
命令总结
ng-app 定义了 AngularJS 应用程序的根元素。
ng-init 指令为 AngularJS 应用程序定义了初始值
ng-model 指令绑定 HTML 元素到应用程序数据。
自定义命令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用.directive函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以-分割,runoob-directive:
以下实例方式也能输出同样结果:
类名:
注释:
限制使用
你可以限制你的指令只能通过特定的方式来调用。
通过添加restrict属性,并设置只值为"A", 来设置指令只能通过属性的方式来调用:
restrict值可以是以下几种:
E只限元素名使用
A只限属性使用
C只限类名使用
M只限注释使用
restrict默认值为EA, 即可以通过元素名和属性名来调用指令。