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

没有必要在您的 sub-components 的控制器中提供包装函数。通过使用 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

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

What is the best way to pass functions between inner components in AngularJS 1.5?

javascript

angularjs

angularjs-compile

angularjs-components