Javascript 在AngularJS 1.5中，在内部组件之间传递函数的最佳方式是什么？

我想知道通过2个或更多级别的组件传递函数的最佳方式是什么？使用'&'绑定时，没有跳过函数包装的简单方法吗

下面是一个用例：

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

angular.module（'app'，[]）.component（'app'{
控制器：类AppController{
doSomething（数据）{}
},
模板：`
`
})

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>
    `
});

.component（'subComponent'{
绑定：{
doSomething:“&”
},
控制器：功能子组件控制器（）{
this._doSomething=param=>this.doSomething（{data:param}）；
},
模板：`
`
});
.component（'innerComponent'{
绑定：{
doSomething:“&”
},
控制器：函数InnerComponentController（）{
this._doSomething=param=>this.doSomething（{data:param}）；
},
模板：`
`
});

然后我就必须传递

\u doSomething

，而不是直接传递

doSomething

---

ps：我在这里不使用transclusion

不需要在子组件的控制器中提供包装函数。通过使用

绑定

将函数自动附加到控制器，您可以直接从模板调用该控制器

唯一的缺点是该函数接受一个对象，该对象包含可用于外部模板中表达式的局部变量

在这种情况下，调用

doSomething（locals）

方法时，需要显式提供外部模板中的

data

变量

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>
  `
});

angular.module（'app'，[]）
.component（'app'{
控制器：类AppController{
剂量测量（数据）{
控制台日志（数据）；
}
},
模板：`
`
})
.组件（“子组件”{
绑定：{
doSomething:“&”
},
模板：`
`
})
.component（'innerComponent'{
绑定：{
doSomething:“&”
},
模板：`
`
})
.component（'子内部组件'{
绑定：{
doSomething:“&”
},
模板：`
做点什么
`
});

---

这是一个可行的解决方案：

@DmitriZaitsev，考虑到我使用的是redux和smart&dumb组件的概念，这不是理想的解决方案：（你能解释一下你所说的函数wrap是什么意思吗？另外，从你的例子中还不清楚内部HTML是否被屏蔽，或者它是否是内部组件模板的一部分。@PeteBD我现在正在编辑这个问题：）你可以通过道具或服务（又名Redux stores.Wow）传递数据。当我想到如何翻译初始的

{data:123}时，还是有点困惑

到父表达式中的局部变量，但它是有效的。我想我会在Angular source中挖掘更多，直到我完全理解。谢谢@petebGreat示例。biiig like:）