angular 实例笔记之嵌套指令间的传参

最近在项目中遇到了需要嵌套指令的情况，指令在嵌套后子指令必须获得父指令中的数据来进行判断，但是在写传参的时候遇到了坑，因此记录下来，防止以后遗忘，个人的肤浅理解，欢迎大家留言讨论

首先，关于directive的scope绑定作用域网上已经有一大堆了，无非就是scope的三种绑定方式，@，=和&，在设置上对应的绑定属性后即可从父作用域中继承并创建一个独立作用域，如

//html中
<my-dir name="lvyi"></my-dir>
//js中
app.directive('myDir', function () {
    return {
        template: '<div>{{name}}</div>'    ,
        restrict: 'AE',
        scope:{
            name:'='
        },
        link: function(scope, ele, attrs) {
        }
    };
});

这样通过给name赋值，即可在指令中拿到想要的数据，但是在做指令嵌套时（即一个指令1中引用了另一个指令2），这么写却拿不到需要的数据，总是undefined，这是为什么呢？

答案就是angular的指令是从内向外构建生成的，所以指令2会先被渲染执行，而在这个时候指令1中的数据还没有获得（比如该数据是通过接口异步获取的），那么指令2中当然就拿不到了，关于解决方式，个人认为最简单的就是用$timeout，如

html稍作改动

<my-dir >第一个指令
    <my-child name2="name1">第二个指令</my-child>
</my-dir>

 

js中就只写第二个指令的directive了，不在重复第一个

app.directive('myChild', function ($timeout) {
 return { 
template: '<div>{{name2}}</div>' , 
restrict: 'AE', scope:{ name2:'=' }, 
link: function(scope, ele, attrs) {
 var time=$timeout(function(){ 
　　　　console.log(scope.name2);
　　　 $timeout.cancel(time);
 　　　},100);
 　} 
}; 
});

这样就可以获得绑定后的参数了，原理大概就是$timeout会将其中的方法延后执行（排在队列的最后），也就是所有的dom都渲染完毕，事件都创建声明之后才会执行，所以这时候数据是已经赋值过后的，但是这个方法的缺点就是比较耗用内存，所以一定要

记着清除定时器，否则很容易页面崩溃

这个就是从外向内传参，那么如果从内向外传参呢，只要直接使用scope自己的绑定方式&即可，通过回调函数，外面的scope就可以拿到里面返回过去的参数了，记着要是一个对象，key value的形式如

<my-child name2="name2(name)">第二个指令</my-child>

app.directive('mychild', function () {
    return {
        template: '<div ng-click="name2({name:ll})">{{name2}}</div>'    ,
        restrict: 'AE',
        scope:{
            name2:'&'
        },
        link: function(scope, ele, attrs) {
            //ng-click或是直接调用scope.name2({name:11})
        }
    };
});

这样在使用my-child的那个作用域下，name2这个方法所带的参数就是内部指令抛出的参数。

以上就是一点点个人理解，主要是为了以后再项目中遇到类似的问题有个思考的方向，有不足的地方欢迎补充指正