Angular 1/Ui-router - Pass data from resolve to controller

Question

I want to pass a data ( contactName ) from the state to the controller by the resolves :

.state({
      name: 'contact.detail.overlay',
      abstract: true,
      component: 'overlayContent',
      resolve: {
        contactName: (originalContact, $rootScope, ContactService) => {
          $rootScope.contactName = ContactService.getContactName(originalContact)
          return $rootScope.contactName
        }
      }
    })

on my state all is correct, contactName is also correct, but it is not accessible in my overlayContent controller, do you have a solution to have $rootScope.contactName access in the controller ?

EDIT : The controller :

class overlayContentComponent {

  constructor($state, $interpolate, $scope) {
    'ngInject'
    this.$scope = $scope
    this.$state = $state
    this.$interpolate = $interpolate
  }

  /**
   *
   * On initialization hook, let's check if an overlay title
   * has been defined for the current state.
   */

  $onInit() {
    const stateData = this.$state.current.data || { title: '' }
    this.overlayTitle = angular.isDefined(stateData.title) ? this.$interpolate(stateData.title)() : ''
  }
}

export const overlayContentComponent = {
  template: require('./overlay-content.html'),
  controller: overlayContentComponent
}

I can access contactName in my controller by this.$scope.$root.contactName but I would like to avoid $scope.$root by another alternative

Answer 1

Change your constructor:

constructor($state, $interpolate, $scope, contactName) {
  'ngInject';
  // The variable you want:
  this.contactName = contactName;
  this.$scope = $scope
  this.$state = $state
  this.$interpolate = $interpolate
}

The 'contactName' resolve should be injected now, into the controller for that state (where the resolve resides). This should allow you to access it in the controller, as above.