[英]What is the best way to pass functions between inner components in AngularJS 1.5?
I was wondering what is the best way to pass functions down through 2 or more levels of components? 我想知道将功能传递到2个或更多级别组件的最佳方法是什么? There's no simple way of skipping the function wrap when using '&' bindings?
使用'&'绑定时,没有简单的方法可以跳过函数换行?
Here's an use case: 这是一个用例:
angular.module('app', []).component('app', {
controller: class AppController {
doSomething (data) {}
},
template: `
<sub-component on-do-something="$ctrl.doSomething(data)">
</sub-component>
`
})
ps: I'm using ngRedux, so such scenario is very common ps:我正在使用ngRedux,所以这种情况很常见
EDIT: 编辑:
The problem is: for the code above to work, each inner component controller would look like this: 问题是:为了使上面的代码工作,每个内部组件控制器将如下所示:
.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>
`
});
And then I'd have to pass down _doSomething
instead of doSomething
directly. 然后我必须直接传递
_doSomething
而不是doSomething
。
ps: I'm not using transclusion here ps:我不是在这里使用翻译
It is not necessary to provide a wrapper function in the controller of your sub-components. 没有必要在子组件的控制器中提供包装器功能。 By using
bindings
a function is automatically attached to the controller, which you can call directly from your template. 通过使用
bindings
,函数会自动附加到控制器,您可以直接从模板调用该控制器。
The only wrinkle is that this function takes an object, which contains the locals that will be made available to the expression in the outer template. 唯一的缺点是此函数接受一个对象,该对象包含将在外部模板中对表达式可用的局部变量。
In this case the data
variable in the outer template needs to be provided explicitly when call the the doSomething(locals)
method. 在这种情况下,在调用
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>
`
});
Here is a working Plunker : http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview 这是一个有效的Plunker: http ://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.