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

Question

I was wondering what is the best way to pass functions down through 2 or more levels of components? There\'s no simple way of skipping the function wrap when using \'&\' bin

Answer 1

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.

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.

angular.module('app', [])

.component('app', {
  controller: class AppController {
    doSomething (data) {
      console.log(data);
    }
  },
  template: `
    
    
  `
})

.component('subComponent', {
    bindings: {
        doSomething: '&'
    },
    template: `
        
        
    `
})

.component('innerComponent', {
    bindings: {
        doSomething: '&'
    },
    template: `
        
        
    `
})

.component('subInnerComponent', {
  bindings: {
    doSomething: '&'
  },
  template: `
      Do Something
  `
});

Here is a working Plunker : http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview