如何将回调从父组件传递到嵌套的路由组件？

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?

Answer 1

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/