AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-
ng-app
指令初始化一个 AngularJS 应用程序。,标记AngularJs的范围,这个范围内AngularJs可以识别。一般放在html标签里,整个html一个就好,多了也只是第一个有作用,值一般不要为空。
ng-init
指令初始化应用程序数据,基本写法就是ng-init=”xxx=’xxx’”,有多个元素的时候,以”;”间隔
<div ng-init="name='HAHA';age='100'"> <p>姓名:{{name}},年龄:{{age}}</p> <!--显示:姓名:HAHA,年龄:100--> </div>
ng-model
指令把元素值(比如输入域的值)绑定到应用程序。
<div ng-init="name='HAHA';age='100'"> <p>姓名:{{name}},年龄:{{age}}</p> <input ng-model="name"></input> </div>
ng-bind
这个指令也是用来绑定数据。
<div ng-init="name='HAHHA'">
<p ng-bind="name"></p>
</div>
ng-model是用于表单元素的,支持双向绑定。对普通元素无效;
ng-bind用于普通元素,不能用于表单元素
当ng-bind和{{}}同时使用时,ng-bind绑定的值覆盖该元素的内容。
<div ng-init="name='HAHHA';age='122'"> <p ng-bind="age">{{name}}</p> </div> 这个最后只会显示122
ng-repeat
指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。看一下列子。
从图上可以看出,是创建了2个ul,然后数据显示在li上,可以加个背景颜色看一下
html:
<div ng-controller="MainController"> <ul ng-repeat="m in emails"> <li>{{$index+1}}:</li> <li>{{m.id}}</li> <li>{{m.name}}</li> <li>{{m.message}}</li> </ul> </div>
js
//邮件
var messages=[{
id:100,name:@H_341_301@"哈哈哈",message:@H_341_301@"今天星期五啊,明天不上班。"
},{
id:300,name:@H_341_301@"猪八戒",message:@H_341_301@"约了师兄逛公园"
}];
app.controller(@H_341_301@'MainController',function($scope){
console.log(messages);
$scope.emails =messages;
});
自定义指令
app.directive(@H_341_301@'myDirective',function(){
return{
template:@H_341_301@"<p>这是一个自定义指令</p>"
}
});
<my-directive></my-directive>
有关指令的使用有多种方法,具体通过restrict 的值来判断
app.directive(@H_341_301@'myDirective',function(){
return{
restrict : @H_341_301@"E",//元素名使用
template:@H_341_301@"<p>这是一个自定义指令</p>"
}
});
1.作为元素名使用
restrict : @H_341_301@"E",//元素名使用
<my-directive></my-directive>
2.作为属性使用
restrict : @H_341_301@"A",//属性使用
<div my-directive></div>
3.作为类名使用
restrict : @H_341_301@"C",//类名使用
<div class=@H_341_301@"my-directive"></div>
4.作为注释使用
restrict : "M",//作为注释名使用
replace : true//这个要加上否则注释使用没效果
<!-- directive:my-directive -->
以上,不对的地方请指出谢谢