index.html |
<!document html> <html ng-app="componets0"> <head> <title>Angular Components</title> <script type="text/javascript" src="lib/angular.js"></script> <script type="text/javascript" src="js/components.js"></script> </head> <body> <custom-tag></custom-tag> </body> </html>
|
js/components.js |
/*作者:江湖一键客 QQ:82530662 *为componets0模块创建一个HTML标签,形如:<custom-tag></custom-tag> */ var module=angular.module("componets0",[]); /*注意标签名的的形式,如果标签名为customTag那么在HTML文档使用时请如下使用: *<custom-tag></custom-tag> *如果全小写形式(customtag),则请如下使用: <customtag><customtag> */ module.directive("customTag",function(){ return { /*restrict的取值范围: *E - 表示创建的是一个HTML标签: <custom-tag></custom-tag> *A - 为HTML标签创建属性: <div my-directive="exp"> </div> *C - 为HTML标签创建类: <div class="my-directive: exp;"></div> *M - 创建HTML注释: <!-- directive: my-directive exp --> */ restrict:"E", /*replace为true时模块则覆盖标签,比如模块是:<div></div>, *则<customTag></customTag>最终解释为<div></div> */ replace:true, /*模块,即把<customTag>映射成最终什么样的HTML代码*/ template:'<div></div>', } }); |
replace为true时的效果: |
replace为false时的效果: |
源码下载:http://files.cnblogs.com/JiangHuakey/AngularJS_Dircetive_Tutorial_Step_00.rar |