一、AngularJs自定义指令directive的restrict属性说明:
今天公用的html部分:
JavaScript部分:
1 | var m = angular.module( 'app' , []); |
2 | m.directive( 'zymBlog' , [ function (){ |
5 | template : '<p>hello world</p>' , |
|
通过directive设置自定义指令,第一个参数是指令名称,第二个参数是数组,包含一个回调函数,函数的返回值是一个json对象,其中:
restrict表示指令的形式:A是属性、E是元素、C是class类,为了避免和style中的class类混淆,不推荐使用C。
template是模板内容,表示使用这个自定义属性的标签中要插入的内容。
replace的值默认是false,如果是true,说明要用templace中的标签替换html代码中使用这个自定义指令的标签。注意,如果使用replace,那么template中必须包含html元素,不能只是几个文字,否则angular会报错。
下面再来看一个属性,templateUrl和template不能同时出现,templateUrl是引用的模板地址:
1 | var m = angular.module( 'app' , []); |
2 | m.directive( 'zymBlog' , [ function (){ |
5 | templateUrl : './46-1.html' , |
|
注意,因为这里使用了replace,所以templateUrl对应的模板内容中必须包含html标签元素。
二、自定义指令的标准命名规范:
directive指令名称用驼峰命名法,例如【zymBlog】,那么在html代码中进行调用时,需要在大写字母之前加一个横杠,例如【zym-blog】。
三、自定义指令template函数式操作:
template不仅可以是一个字符串,也可以是一个函数,例如:
01 | var m = angular.module( 'app' , []); |
02 | m.directive( 'zymBlog' , [ function (){ |
05 | template : function (){ |
06 | return '<p>赵一鸣个人技术博客</p>' ; |
|
四、自定义指令transclude属性:
有一种情况,在html中使用了自定义指令,但是标签内部原来就有内容,这样的话,自定义指令里边的内容会把标签原来的内容替换掉,所以需要一个添加一个属性来解决这个问题(ng-transclude):
html部分:
js部分:
01 | var m = angular.module( 'app' , []); |
02 | m.directive( 'zymBlog' , [ function (){ |
05 | template : function (){ |
06 | return '<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>' ; |
|
设置ng-transclude的值为true之后,还必须在自定义指令的内部再加入一个标签,并且制定ng-transclude,这样是把原来html标签里边的内容放到这个标签里边!