本节将介绍自定义指令中更高级的配置项。
transclude配置项
如果在操作自定义指令时,存在嵌套结构或者嵌套的自定义指令,会出现一些意想不到的问题。
transclude配置项,字面意思就是嵌入,默认为false;
将transclude设为true时,需要与ng-transclude配合使用
实现指令嵌套指令:
<pre><!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script src="js/angular.min.js"></script><script type="text/javascript">var m1= angular.module("myApp",[]);m1.directive("hello",function(){return{restrict:"E",replace:true,tensclude: true,//当transclude为true时,在此指令的模板中必须要设置ng-transclude//这样设置的意思是:将当前指令内嵌套的元素替换h1标签内的内容。template : '<div>hello angular<h1 ng-transclude></h1></div>',};});m1.directive("hi",function(){return{restrict:"E",replace:true,template : '<span>hi angular</span>',};});m1.controller('Aaa',['$scope',function($scope){}]);</script></head><body ng-controller="Aaa"><hello><hi></hi></hello></body></html></pre>
运行结果:
从图中可以看到,”hi”指令此时已经嵌套到”hello”指令中指定的位置上了。
require配置项
实现指令之间的数据交互:
<pre><!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script src="js/angular.min.js"></script><script type="text/javascript">var m1= angular.module("myApp",[]);m1.directive("hello",function(){return{restrict:"E",replace:true,transclude: true,//当transclude为true时,在此指令的模板中必须要设置ng-transclude//这样设置的意思是:将当前指令内嵌套的元素替换h1标签内的内容。template : '<div>hello angular<h1 ng-transclude></h1></div>',controller: function ($scope) {//把name绑定到$scope上,此时name的作用域只在"hello"指令内部,在别的指令内不能使用/*$scope.name = "nice";*///把name绑定到$scope上,此时name可以被允许在别的指令内使用this.name = "nice";}};});m1.directive("hi",function(){return{restrict:"E",replace:true,//require的值为需要引入的指令名字require: "hello",template : '<span>hi angular</span>',//reController就是所引入或者所依赖的指令的controllerlink: function(scope,element,attr,reController){console.log( reController );//相当于"hello"指令中的this}};});m1.controller('Aaa',['$scope',function($scope){}]);</script></head><body ng-controller="Aaa"><hello><hi></hi></hello></body></html></pre>
运行结果如下:
运行报错
出错原因:
require: "hello"
默认是引入当前指令自身上的指令,但是要引入的指令”hello”与当前指令”hi”是父- 子关系,所以程序执行出错。
^
: 向上查找
对上述代码改正:
在require的值前面加入”^”符号,即require: "^hello"
:代表要在当前指令的父级去找”hello”指令。
改正后运行结果:
?
: 容错
如果在require的值前面加入的是”?”符号,即require: "?hello"
:意思是在寻找需要引入的”hello”指令的过程中,如果没有找到,也不会报错。
运行结果:
从图中可看出:打印出的’reController’的值为null而没有报错。
综上可知,require的值写成这样:require: "?^hello"
,会比较好。
总结:
很容易把自定义指令中的controller与link弄混,所以再次做下区别:
- link:
把当前指令所对应的DOM操作都写在link中;link所做的都是当前指令所实现的内部功能,是对内的;
- controller:
一般是多次指令调用时的数据共享;在指令与指令之间交互时,可以提供公有的属性或方法;