指令是扩展的Html'属性,带有前缀ng
ng-app指令用来初始化一个angular应用程序
ng-init用来初始化应用程序数据
ng-repeat指令重复一个html元素
ng-options指令创建选择框
使用ng-options通过对象和数组循环输出来创建一个下拉框。举例如下:
<select ng-options="x.name for x in names"></select>
也可以使用ng-repeat通过数组循环Html代码来创建下拉列表。举例如下:
<select>
<option ng-repeat="x in names">{{x.name}}</option>
</select>
ng-options与ng-repeat的区别,ng-options的选项是一个对象,而ng-repeat是一个字符串他有局限性,从这点可以看出来ng-options更适合创建下拉列表。
ng-model指令绑定Html元素到应用程序数据。也可以:为应用程序数据提供类型验证(munber,email,required);为应用程序数据提供状态(invalid,dirty,touched,error);为Html元素提供css类;绑定Html元素到Html表单
自定义指令
angularJs除了内置指令外还可以通过.directive函数来创建自定义指令,
要调用自定义指令Html元素要加上自定义指令名。
使用驼峰命名法命名一个指令,runoobDirective,使用时要用‘-’分割runoob-directive
<body ng-app="myApp">
<runoob-directive></runoob-directive>
</body>
<script>
var app=angular.moudle("myApp",[]);
app.directive("runoobDirective",function(){
return{
restrict:“A” //设置该指令只能通过属性的方式来调用
template:"<h1>自定义指令</h1>"
}
})
</script>
自定义指令可以通过使用元素名、属性、类名、注释来调用指令,如下:
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!--directive:runoob-directive-->
通过设置restrict来设置通过哪种方法来调用,可以是以下几种值:
E 作为元素名使用 、 A作为属性名使用 、 C作为类名来使用、M作为注释来使用。 restrict默认值为“EA”,可以通过元素名和属性名来直接调用
网友评论