本节将介绍自定义指令中更高级的配置项。
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:
一般是多次指令调用时的数据共享；在指令与指令之间交互时，可以提供公有的属性或方法；
