NG1 ES6 components usage

Hi Hackers!

I was wondering, is there an example using a dynamic label from $scope => using ES6 Classes?

For example:

const testConfig = function($stateProvider) {
  "ngInject";

  $stateProvider
    .state('testShow', {
      url: '/{id:[0-9]+}',
      component: 'testShow',
      ncyBreadcrumb: {
        parent: 'test',
        label: 'Edit {{ $ctrl.name }}'
      }
    });
};

export default testConfig;

I am not able to use name, $ctrl.name nor $scope in the config route for this PoC.

import template from './index.html';
import controller from './controller';
import './styles.styl';

let testShowComponent = {
  restrict: 'E',
  bindings: {},
  template,
  controller,
  controllerAs: '$ctrl'
};

export default testShowComponent;

import {Controller} from 'es6-angular-util';

class TestShowController extends Controller {
  constructor($scope) {
    "ngInject";

    // required by es6-angular-util
    super($scope);

    this.name = 'TEST THIS';

    $scope.name = 'TEST $SCOPE';
  }
}

Any help is welcome, thanks!

[kristofdegrave]

A possible solution is to use reslove in your route. If you do this you can access the $resolve of the ui-router

$stateProvider
    .state('testShow', {
      url: '/{id:[0-9]+}',
      component: 'testShow',
      resolve: resolve: {
           id: ["$stateParams", function($stateParams) {
              return $stateParams.id;
          }]
      },
      ncyBreadcrumb: {
        parent: 'test',
        label: 'Edit {{ $resolve.id }}'
      }
    });

An other option is to use an inner property of angular called $$childHead (which retrieves a child scope)

$stateProvider
    .state('testShow', {
      url: '/{id:[0-9]+}',
      component: 'testShow',
      ncyBreadcrumb: {
        parent: 'test',
        label: 'Edit {{ $$childHead.$ctrl.name }}'
      }
    });

[blowsie]

@biltongza yep, thanks I already had this in my config too, usefeull for @tonestrike to know.