NG1 ES6 components usage

[josoroma-zz]

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!

[josoroma-zz]

More info:

• https://github.com/AngularClass/NG6-starter/issues/193

[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 }}'
      }
    });

[akarelas]

Thanks @kristofdegrave , both solutions worked on Ang 1.6 components with class definitions.

[blowsie]

For me $resolve is empty. Any ideas why? Where can I debug this?

 $stateProvider
      .state('batch', {
        parent: 'app',
        url: '/batches/:batchId',
        component: 'batch',
        ncyBreadcrumb: {
          label: 'Batch {{$resolve | json}}',
          parent: 'batches'
        },
        resolve: {
          batch: function(BatchService, $stateParams) {
            return BatchService.batches.get({batchId: $stateParams.batchId}).$promise
          },
          id: function($stateParams) {
            return $stateParams.batchId;
          }
        }
      });

    "angular": "~1.6.0",
    "angular-animate": "~1.6.0",
    "angular-cookies": "~1.6.0",
    "angular-i18n": "^1.6.1",
    "angular-messages": "~1.6.0",
    "angular-aria": "~1.6.0",
    "angular-resource": "~1.6.0",
    "angular-ui-router": "1.0.0-beta.3",

---

Update

$resolve.id works when navigating to the page but not when refreshing.

[tonestrike]

@blowsie did you figure out a solution to your problem?

[blowsie]

@tonestrike yes, my solution was to access $transition$.params() instead.

  $stateProvider
      .state('batch', {
        parent: 'dropship',
        url: '/batches/:batchId',
        component: 'dropshipBatch',
        ncyBreadcrumb: {
          label: 'Batch {{$resolve.params.batchId}}',
          parent: 'batches'
        },
        resolve: {
          params: function($transition$) {
            return $transition$.params();
          },
          batch: function(Dropship_BatchResource, $transition$) {
            return Dropship_BatchResource.batches.get(
              $transition$.params()
            ).$promise
          }
        }
      });

[tonestrike]

Thanks! I used a much more janky way to solve this problem. This is helpful.

[biltongza]

@blowsie I'm using the solution from here https://github.com/ncuillery/angular-breadcrumb/issues/42#issuecomment-58029308 to fix it. I don't know how or why it works, but it works.

This is literally my run block:

angular.module(moduleName)
    .run(['$breadcrumb', function ($breadcrumb) { }]);

[blowsie]

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

[tonestrike]

Oh awesome! Thank you both.