angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > </head> <body> <div ng-app= "myApp" > <custom-tags>122</custom-tags> <div class = "custom-tags" > </div> <div custom-tags> </div> <!--directive:custom-tags--> </div> <script type= "text/javascript" src= "../../vendor/angular/angularJs.js" ></script> <script type= "text/javascript" src= "app/index.js" ></script> <script> </script> </body> </html> |
index.js:
1 2 3 4 5 6 7 8 9 10 11 | var myApp = angular.module( 'myApp' , [],[ '$compileProvider' ,function ($compileProvider) { $compileProvider.directive( 'customTags' ,function () { return { //E:element C:class属性 A:attribute M:代表注释 restrict: "ECAM" , //限制约束条件 //替换 template: '<div>custom-tags-html</div>' , replace: true //如果此配置为true则替换指令所在的元素 如果为false或者不指定 则把当前指令追加到所在元素的内部 } }) }]) |
运行结果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步