在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 ，函數會自動附加到控制器，您可以直接從模板調用該控制器。

唯一的缺點是此函數接受一個對象，該對象包含將在外部模板中對表達式可用的局部變量。

在這種情況下，在調用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>
  `
});

這是一個有效的Plunker： http ：//plnkr.co/edit/QQF9jDGf6yiewCRs1EDu？p = preview