Passing parameters to ui-view

Question

I am trying to pass parameters to a nested ui-view:

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

Now let me explain why I need this. This is what my ui looks like:

This is a custom Angular map. There are several tabs inside this component, such as subcomponents with their own states. My goal is to provide a user object for 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 again: the user object is not loaded into the ui-router controller, but the component controller. The template for this component is nested in which I would like to have a custom object.

Answer 1

, ui-router ,

$scope.$ctrl.youparentproperty

:

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

, - - https://plnkr.co/edit/9LSNtWWcom6ERZRBucXB?p=preview

Answer 2

.

.state('user', {
        url: '/user/:userId',
        template: `<user user-id="userId"></user>`,
        controller: ($scope, $stateParams) => {
          $scope.userId = +$stateParams.userId;
        }
      })
      ...
      .state('user.tab1', {
        url: '/tab1',
        parent: 'user',
        template: '<tab1 user="$ctrl.user"></tab1>',
        controller: ($scope, $state) => {
          //In order to access the scope of a parent controller in Angular UI Router use:
          let course = $scope.$parent.user;
        }
      });

, , $rootscope.