Question

我有以下格式，其中我有一个全局组件，它有3个嵌套组件，这些组件是根据给定路径激活的：

  $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'
    });

在主create-goal html文件中，我有以下内容：

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

goal和goalInfo效果很好，因为它们是数据绑定的单向数据。但是，当我想传递一个函数（例如processStep1来计算step-1上的某些操作等）时，即使step-1组件中该函数未显示在goal组件中{1}}和goalInfo做。

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

思想？

Answer 1

有几种方法可以做到这一点。

使用$ parent访问该函数（我建议不要这样做，因为它是相对的，可能会导致问题
使用属性将其传递下来，根据您的使用情况，使用'= function'或'＆amp; function'将其注入每个子函数
在可以在任何地方注入的辅助服务中设置该功能。如果你计划大量使用它，如果它只是用于数据操作，那么它确实属于服务，无论如何都要避免膨胀的控制器。
最后一种方式是使用模型。如果它是一个在某些类型的对象上运行的函数，例如可以轻松建模的用户，那么这将是一件好事。例如.save或.update函数。

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/

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

1 个答案: