How to pass down a callback from a parent component to a nested routed component?

Question

I have the following format where I have a global component that has 3 nested components that are activated based on a given route:

  $stateProvider
    .state('create-goal', {
      url: '/create-goal',
      component: 'createGoal',
      redirectTo: 'create-goal.step-1'
    })
    .state('create-goal.step-1', {
      url: '/step-1',
      component: 'step1'
    })
    .state('create-goal.step-2', {
      url: '/step-2',
      component: 'step2'
    })
    .state('create-goal.step-3', {
      url: '/step-3',
      component: 'step3'
    });

Inside of the main create-goal html file, I have the following:

  <ui-view goal="$ctrl.goal"
           goalInfo="$ctrl.goalInfo"
           processStep1="$ctrl.processStep1">
  </ui-view>

The goal and goalInfo work great as they are data that is one way data bound. However, when I want to pass down a function, such as processStep1 to compute some action on step-1 and so forth, that function does not show up in the step-1 component even though the goal and goalInfo do.

export default {
  name: 'step1',
  restrict: 'E',
  bindings: {
    goal: '<',
    processStep1: '&'
  },
  template,
  controller
};

Thoughts?

When do you want to call $ctrl.processStep1 function? Can you please also share a bit of code where the function is called? — Amir Suhail, Mar 31 '17 at 11:02
Which version of ui-router are you using? I had the same problem until I upgraded to 1.0.12, although I think 1.0.3 would've added this functionality as well. — Adam, Jan 06 '18 at 00:34

score 0 · Answer 1 · answered Mar 30 '17 at 01:03

There a few ways you could go about doing this.

Access the function using $parent (I recommend against this, as it is relative and can cause problems
Pass it down using attributes to inject it into each child function using the '=function' or '&function' depending on your use case
Set the function in a helper service that can be injected anywhere. This is great if you plan on using this a lot and if it is just for data manipulation it really belongs in a service anyways to avoid bloated controllers.
The last way would be use models. This would be good for if it is a function to be run on a certain type of object like users that can easily be modeled. Such as a .save or .update function.

https://docs.angularjs.org/guide/directive http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html https://www.sitepoint.com/tidy-angular-controllers-factories-services/ http://www.webdeveasy.com/angularjs-data-model/

Thanks for the tips, but I opted in for passing down a callback from the parent down the child component. But, as outlined above, for some reason, it doesn't get recognized. I was looking to see if I was missing something there... — Detuned, Mar 30 '17 at 14:11

How to pass down a callback from a parent component to a nested routed component?

1 Answers1