Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML;通过内置的指令来为应用添加功能;
2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-;
**ng-app:指令初始化一个AngularJS应用程序
**ng-init:指令初始化应用程序数据
**ng-model:指令把元素(比如输入域的值)绑定到应用程序;
<div ng-app="" ng-init="firstName='John'">
<p>在输入框尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为:{{firstName}}</p>
</div>
3.ng-app指令告诉AngularJS,<div>元素是Angular应用程序的“所有者”,一个网页可以包含多个运行在不同元素的Angular应用程序;
4.数据绑定:{{firstname}}表达式是一个AngularsJS数据绑定表达式;
AngularJS中的数据绑定,同步了AngularJS表达式与AngularJS数据;
{{firstname}}是通过ng-model="firstname"进行同步;
例:
<div ng-app="" ng-init="quantity=1price=5;">
<h2>价格计算器</h2>
数量:<input type="number" ng-model="quantity">
价格:<input type="number" ng-model="price">
<p><b>总价:</b>{{quantity*price}}</p>
</div>
5.重复HTML元素:ng-repeat指令会重复一个HTML元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat来循环数组</p>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
6.ng-app指令:定义了AngularJS应用程序的根元素,在网页加载完毕时会自动引导(自动初始化)应用程序;
7.ng-init指令:为AngularJS应用程序定义了初始值;通常情况下,不使用ng-init,使用一个控制器或模块来代替它;
8.ng-model指令:绑定HTML元素到应用程序数据;
**为应用程序提供类型验证(number,email,required)
**为应用程序数据提供状态(invalid,dirty,touched,error)
**为HTML元素提供CSS类
**绑定HTML元素到HTML表单
9.ng-repeat指令:ng-repeat指令对于集合中(数组中)每一个项会克隆一次HTML元素
10.创建自定义的指令:除了AngularJS内置的指令外,还可以创建自定义的指令;
**可以使用.directive函数添加自定义的指令;
**要调用自定义指令,HTML元素上需添加自定义指令名;
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app=angular.module("myApp",[]);
app.directive("runoobDirective",function(){
return{
template:"<h1>自定义指令!</h1>"
};
});
</script>
</body>
11.可以使用以下方式调用指令:
(1)元素名:<runoob-directive></runoob-directive>
(2)属性:<div runoob-directive></div>
(3)类名:<div class="runoob-directive"></div>
(4)注释:<!--指令:runoob-directive-->
12.限制使用:限制你的指令只能通过特定的方式调用;
var app=angular.module("myApp",[]);
app.directive("runoobDirective",function(){
return{
restrict :"A",
template :"<h1>自定义指令!</h1>"
};
});
**restrict值可以是以下几种:默认为EA,即通过元素名和属性名来调用指令
E作为元素名使用
A作为属性使用
C作为类名使用
M作为注释使用