内裤总动员之AngularJS指令

          各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一个新的东西就是.AngularJS.跟着上一次的继续,今天给大家分享一下AngularJS指令.

AngularJS 通过被称为指令的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS指令

AngularJS 指令是扩展的 HTML 属性,带有前缀ng-

ng-app指令初始化一个 AngularJS 应用程序。

ng-init指令初始化应用程序数据。

ng-model指令把元素值(比如输入域的值)绑定到应用程序。

《内裤总动员之AngularJS指令》 ng-app

ng-app指令告诉 AngularJS,div元素是 AngularJS应用程序的”所有者”。

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

数据绑定

栗子:俩文本是通过ng-model指令同时指出的

《内裤总动员之AngularJS指令》

重复 HTML 元素


ng-repeat指令会重复一个 HTML 元素:

《内裤总动员之AngularJS指令》 ng-repeat

ng-repeat用在一个对象数组上.

《内裤总动员之AngularJS指令》 ng-repeat

AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。

把实例中的对象想象成数据库中的记录。

命令总结

ng-app 定义了 AngularJS 应用程序的根元素

ng-init  指令为 AngularJS 应用程序定义了初始值

ng-model 指令绑定 HTML 元素到应用程序数据。

自定义命令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

你可以使用.directive函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以分割,runoob-directive:

《内裤总动员之AngularJS指令》 runoob-directive

以下实例方式也能输出同样结果:

《内裤总动员之AngularJS指令》

类名:

《内裤总动员之AngularJS指令》

注释:

《内裤总动员之AngularJS指令》

限制使用

你可以限制你的指令只能通过特定的方式来调用。

通过添加restrict属性,并设置只值为”A”, 来设置指令只能通过属性的方式来调用:

《内裤总动员之AngularJS指令》

restrict值可以是以下几种:

E只限元素名使用

A只限属性使用

C只限类名使用

M只限注释使用

restrict默认值为EA, 即可以通过元素名和属性名来调用指令。

    原文作者:内裤总动员
    原文地址: https://www.jianshu.com/p/ea155d0a586d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞