在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