AngularJs1学习笔记:指令
ng-app
ng-init
<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>
<div ng-init="name='HAHHA';age='122'"> <p ng-bind="age">{{name}}</p> </div> 这个最后只会显示122
ng-repeat
<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>
//邮件
var messages=[{
id:100,name:"哈哈哈",message:"今天星期五啊,明天不上班。"
},{
id:300,name:"猪八戒",message:"约了师兄逛公园"
}];
app.controller('MainController',function($scope){
console.log(messages);
$scope.emails =messages;
});
自定义指令app.directive('myDirective',function(){
return{
template:"<p>这是一个自定义指令</p>"
}
});
<my-directive></my-directive>
app.directive('myDirective',function(){
return{
restrict : "E",//元素名使用
template:"<p>这是一个自定义指令</p>"
}
});
1.作为元素名使用restrict : "E",//元素名使用
<my-directive></my-directive>
2.作为属性使用restrict : "A",//属性使用
<div my-directive></div>
3.作为类名使用restrict : "C",//类名使用
<div class="my-directive"></div>
4.作为注释使用restrict : "M",//作为注释名使用
replace : true//这个要加上否则注释使用没效果
<!-- directive:my-directive -->
以上,不对的地方请指出谢谢 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |