您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天。谢谢
接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令
今天主要先简单了解学习一下指令的一些基本概念后使用
一、指令的简介
指令其实就是angularjs对html的一个扩展,实现自定义html元素
angularjs其自身封装了一些常用的系统指令,我们也可以根据需要自定义指令
二、自定义指令简介
自定义指令的基本格式
app.directive("指令名称",function(){
restrict: '指令匹配格式',
replace: true,是否自定义元素替代指令申明
template: '<a href="http://www.baidu.com">百度一下马上达</a>'
});
自定义指令关键词说明:
指令名称说明:名字一般采用驼峰命名,及首字母小写其余单词大写
在调用时,要将大写字母转换为小写并加上-
举例:myDirectiveTest 调用为:my-directive-test
备注:由于其内部指令是以ng开头,所以为了避免冲突,自定义指令名称不要以ng开头
restrict有四种枚举值:
E:指令按照元素来匹配
使用:<my-directive-test></my-directive-test>
C:按照class来匹配
使用:<div class='my-directive-test'></div>
A:按照属性来匹配
使用:<div my-directive-test></div>
M:按照注释来匹配
<!--directive:my-directive-test-->
虽然提供了四种匹配方式,但是考虑到浏览器的兼容性问题,尽可能按照属性来匹配:A
一个简单的练习:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title></head><body ng-app="myApp"> <my-directive-e></my-directive-e><br /> <div my-directive-a></div><br /> <p class="my-directive-c"></p><br /></body></html><script src="Scripts/angular.js"></script><script type

