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

然后我必须直接传递_doSomething 而不是doSomething。

ps：这里我没有使用嵌入

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