Pass parameters into ui-view

Question

I'm trying to pass parameters into nested ui-view:

<ui-view user="user"></ui-view>

And now let me explain why do I need this. That is how my ui looks like:

It's user card Angular component. Inside this component there are several tabs like subcomponents with own states. My goal is to provide user object for the tabs from the parent state.

Let me also show some simplified code:

  .state('user', {
    url: '/user/:userId',
    template: `<user user-id="userId"></user>`,
    controller: ($scope, $stateParams) => {
      $scope.userId = +$stateParams.userId;
    }
  })
  ...
  .state('user.tab1', {
    url: '/tab1',
    template: '<tab1 user="$ctrl.user"></tab1>',
    controller: ($scope, $state) => {
      //I would like to get access to the user object here
      let course = $scope.$ctrl.user;
    }
  });

So one more time: user object is loaded not in ui-router controller, but controller of component. Template of this component has nested in which I would like to have user object.

Answer 1

I found that ui-router does not create isolated scope for child states, so you can easily access them by

$scope.$ctrl.youparentproperty

and in my case it's:

.state('user.tab1', {
  url: '/tab1',
  template: '<tab1 user="$ctrl.user"></tab1>',
});

and the plunker with example, if somebody else struggling with the same issue - https://plnkr.co/edit/9LSNtWWcom6ERZRBucXB?p=preview