AngularJs with TypeScript and UI-Router. Accessing parent's state properties without using parameters

Question

If using Ui-Router with AngularJS and TypeScript, can I access the properties defined in a parent state from the nested estate directly (without using params or data)?

I can use $state.$current.parent to access data in the data property, but I would like to access a property defined in the controller directly. I have called it xxx in the sample code provided.

Here is my example:

THE ROUTES:

 $stateProvider
  .state(STATE_NAMES.JOB_ADD.MAIN, {
    url: '/jobs/:Id',
    redirectTo: STATE_NAMES.JOBL_ADD.DETAILS,
    views: {
      'content': {
       component: COMPONENT_NAMES.JOBS_ADD.MAIN
      }
    }
  })

    // nested states
    .state(STATE_NAMES.JOB_ADD.DETAILS, {
      url: '/details',
      views: {
        'section': {
          component:  COMPONENT_NAMES.JOBS_ADD.DETAILS
        }
     }
    })

THE PARENT STATE CONTROLLER

 public xxx: string; //I want to access this property from the controller


  constructor(
    private talentPoolAddService: ITalentPoolAddService,
    private $state: router.StateService,
    private $scope: ng.IScope,
  ) {
    this.xxx = 'ascs';
  }


  bindings = {
    application: '<',
    applicationId: '<',
    xxx: '<'
  };

PARENT VIEW

   <form>   

      <section ui-view="section"> <!-- nested views are rendered here-->

      <button>....</button>

   </form>

THE NESTED STATE CONTROLLER

 public xxx: string;

  bindings = {
    application: '<',
    applicationId: '<',
    xxx: '<'
  };

NESTED VIEW

<p> {{$ctrl.xxx}} </p>//nothing

Thanks.

Each controller will have its own scope so you're out of luck (as far as I'm aware). The best solution I've found is to use a service to store shared data between controllers. If you only want the data to be available to certain states, then you can clear the data `onExit` from a state. — BShaps, Jun 23 '18 at 00:22
Maybe this question helps https://stackoverflow.com/questions/16635381/angular-ui-router-get-previous-state — Protozoid, Jun 23 '18 at 00:24

score 0 · Answer 1 · answered Jun 24 '18 at 10:02

Actually this is a bit under-documented feature in ui-router, but it's actually possible to achieve this.

Update the parent's template to something like this:

<form>   
   <section>
     <ui-view name="section" xxx="$ctrl.xxx"></ui-view>
   </section>
   <button>....</button>
</form>

Notice the <ui-view /> component. It has a special ability to take any property and pass it down to an underlying component as a binding.

AngularJs with TypeScript and UI-Router. Accessing parent's state properties without using parameters

1 Answers1