Step_00.AngularJS自定义HTML标签

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时的效果:

Step_00.AngularJS自定义HTML标签

replace为false时的效果:

Step_00.AngularJS自定义HTML标签

 

 

 

 

 

 



 

 

 

 

 

 

 

 

 

源码下载:http://files.cnblogs.com/JiangHuakey/AngularJS_Dircetive_Tutorial_Step_00.rar

你可能感兴趣的:(AngularJS)