angularJS1笔记-(9)-自定义指令(restrict/template/replace)
2017-05-16 13:18
344 查看
index.html:
index.js:
运行结果:
<!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:
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或者不指定 则把当前指令追加到所在元素的内部 } }) }])
运行结果:
![](https://images2015.cnblogs.com/blog/543426/201705/543426-20170516131717682-706004201.png)
相关文章推荐
- angularJS 自定义指令 属性:restrict、template、replace
- angularJS 自定义指令 属性:restrict、template、replace
- angularjs 指令详解 - template, restrict, replace
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
- angularjs 指令详解 - template, restrict, replace
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
- angularJS1笔记-(14)-自定义指令(scope)
- angularjs 指令详解 - template, restrict, replace
- angularjs 指令详解 - template, restrict, replace
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
- angularJS1笔记-(12)-自定义指令(compile/link)
- 随时笔记---------template的分离编译
- 《C++ Template. The Complete Guide》笔记之三 Class Templates
- 怪异的template用法 学习笔记
- WPF学习笔记(1):样式(Style)与模板(Template)
- python template mako 学习笔记
- [转]C++ Template学习笔记之函数模板(5)——模板编译模式
- C++ TEMPLATE 学习笔记
- 《C++ Template. The Complete Guide》笔记之一 缘起