AngularJS 学习笔记---AngularJS 指令
AngularJS指令AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有前缀ng-。 ng-app指令初始化一个 AngularJS 应用程序。 ng-init指令初始化应用程序数据。 ng-model指令把元素值(比如输入域的值)绑定到应用程序。 完整的指令内容可以参阅AngularJS 参考手册。 AngularJS 实例<div ng-app="" ng-init="firstName='John'">
ng-app指令告诉 AngularJS,<div> 元素是 AngularJS应用程序的"所有者"。
数据绑定上面实例中的{{ firstName }}表达式是一个 AngularJS 数据绑定表达式。 AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。 {{ firstName }}是通过ng-model="firstName"进行同步。 在下一个实例中,两个文本域是通过两个 ng-model 指令同步的: AngularJS 实例<div ng-app="" ng-init="quantity=1;price=5">
重复 HTML 元素ng-repeat指令会重复一个 HTML 元素: AngularJS 实例<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
ng-repeat指令用在一个对象数组上: AngularJS 实例<div ng-app="" ng-init="names=[
ng-app 指令ng-app指令定义了 AngularJS 应用程序的根元素。 ng-app指令在网页加载完毕时会自动引导(自动初始化)应用程序。 稍后您将学习到ng-app如何通过一个值(比如 ng-app="myModule")连接到代码模块。 ng-init 指令ng-init指令为 AngularJS 应用程序定义了初始值。 通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。 稍后您将学习更多有关控制器和模块的知识。 ng-model 指令ng-model指令绑定 HTML 元素到应用程序数据。 ng-model指令也可以:
ng-repeat 指令ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。 创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用.directive函数来添加自定义的指令。 要调用自定义指令,HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令,runoobDirective,但在使用它时需要以-分割,runoob-directive: AngularJS 实例<bodyng-app="myApp">
你可以通过以下方式来调用指令:
以下实例方式也能输出同样结果: 元素名 <runoob-directive></runoob-directive>
属性 <divrunoob-directive></div>
类名 <divclass="runoob-directive"></div>
注释 <!-- 指令: runoob-directive -->
限制使用你可以限制你的指令只能通过特定的方式来调用。 实例通过添加restrict属性,并设置只值为 varapp = angular.module("myApp",function() {
restrict值可以是以下几种:
restrict默认值为 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |