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這個方法所帶的參數就是內部指令拋出的參數。

以上就是一點點個人理解，主要是為了以后再項目中遇到類似的問題有個思考的方向，有不足的地方歡迎補充指正