Step_00.AngularJS自定义HTML标签-CSDN博客

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>',
    }
});