在AngularJS 1.5的內部組件之間傳遞函數的最佳方式是什麼？

Question

我想知道什麼是通過2個或更多級別的組件傳遞函數的最佳方式？使用'&'綁定時，沒有簡單的方法可以跳過功能換行？

下面是一個使用案例：

angular.module('app', []).component('app', { 
    controller: class AppController { 
    doSomething (data) {} 
    }, 
    template: ` 
    <sub-component on-do-something="$ctrl.doSomething(data)"> 
    </sub-component> 
    ` 
}) 

PS：我使用ngRedux，所以這樣的情況是很常見的

編輯：

的問題是：對於上述工作的代碼，每個內部組件控制器是這樣的：

.component('subComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    controller: function SubComponentController() { 
     this._doSomething = param => this.doSomething({data: param}); 
    }, 
    template: ` 
     <inner-component do-something="$ctrl._doSomething(data)"> 
     </inner-component> 
    ` 
}); 

.component('innerComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    controller: function InnerComponentController() { 
     this._doSomething = param => this.doSomething({data: param}); 
    }, 
    template: ` 
     <sub-inner-component do-something="$ctrl._doSomething(data)"> 
     </sub-inner-component> 
    ` 
}); 

然後，我不得不通過d直接擁有_doSomething而不是doSomething。

PS：我沒有使用transclusion這裏

Answer 1

這是沒有必要在你的子組件的控制器提供的包裝功能。通過使用bindings功能會自動附加到控制器，您可以直接從模板調用該功能。

唯一的問題是該函數需要一個對象，該對象包含將在外部模板中可用於表達式的局部變量。

在這種情況下，在外部模板的data變量需要調用的doSomething(locals)方法時要明確提供。

angular.module('app', []) 

.component('app', { 
    controller: class AppController { 
    doSomething (data) { 
     console.log(data); 
    } 
    }, 
    template: ` 
    <sub-component do-something="$ctrl.doSomething(data)"> 
    </sub-component> 
    ` 
}) 

.component('subComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    template: ` 
     <inner-component do-something="$ctrl.doSomething({data: data})"> 
     </inner-component> 
    ` 
}) 

.component('innerComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    template: ` 
     <sub-inner-component do-something="$ctrl.doSomething({data: data})"> 
     </sub-inner-component> 
    ` 
}) 

.component('subInnerComponent', { 
    bindings: { 
    doSomething: '&' 
    }, 
    template: ` 
     <button ng-click="$ctrl.doSomething({data: 123})">Do Something</button> 
    ` 
}); 

這裏是一個工作Plunker：http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview