Doesn't work with Angular 1.6 components

[akarelas]

Here's my component:

angular.module('myApp').component('home', {
    template: require('./home.component.html'),
    controller: function($scope) {
        $scope.name = "Alexander";
        this.name = "Alexander";
        name = "Alexander";
    }
});

angular.module('myApp').config(function($stateProvider) {
    $stateProvider.state({
        name: 'home',
        url: '/',
        component: 'home',
        parent: 'site',
        ncyBreadcrumb: {
            label: 'Home page {{$ctrl.name}} {{name}} {{$scope.name}}'
        }
    });

});

The breadcrumb on the webpage only says "Home page", it doesn't say "Alexander".

Will this be fixed?

Thanks.

[jthn]

See #170, you can use $$childHead.$ctrl.name or use resolve.

[akarelas]

I thought noone was supposed to be using variables that start with double "$", like $$childHead, because they're private to Angular and may change at any time without notice. Am I wrong?

[yarhouse]

I came here previously looking for a solution, but have since figured out a workaround for my specific usage and wanted to share it with the next person who comes here looking for help as well.

Having the non-linear parent crumb is an important feature for my use case. For any route that needs a breadcrumb, create a parent state with a standard $scoped controller that redirectTo its child view that utilizes the component feature. The resolve data only has to be called once in the parent, allowing access to those values for my necessary crumb labels and then inherited by the child state component bindings where the real work of the application is performed. The parent is also prepared for more specified child states beyond a default view, and can be utilized in other non-linear breadcrumbs.

Here is an example of my approach, I hope it can help someone

var singleContent = {
    bindings: {
        data: '<',
        $transition$: '='
    },
    templateUrl: 'app/components/contents/single-content/single-content.html',
    controller: 'SingleContentController',
};

angular
    .module('contents.module',)
    .component('singleContent', singleContent)
    .config(function ($stateProvider) {
        $stateProvider
        .state('contents.single', {
            redirectTo:'contents.single.view',
            // Leaves contents.single state as a view passthru for more children
            template:'<div ui-view class="contents-single"></div>', 
            controller:function($scope, data, $transition$){
                /*
                    set contentType like the value of non-linear parent crumb 
                    contents.all.type, which also uses this parent/child.view setup
                */ 
                $scope.contentType = $transition$.params().contentType;
                $scope.contentName = data.name; // For this label
            },
            url: '/content/:contentType/:contentId',
            params: {
                contentId: null,
                contentType: null
            },
            resolve : {
                data: function(ContentsModuleAPIService, $transition$){
                    return ContentsModuleAPIService
                            .getSingleContent($transition$.params().contentId, 0)
                }
            },
            ncyBreadcrumb: {                
                parent: 'contents.all.type',
                label: '\"{{ contentName }}\"'
            },
        })
        .state('contents.single.view', {
            component: 'singleContent',
            url: '',
            ncyBreadcrumb: {                
                parent: 'contents.single',
                label: 'Details'
            },
        })
    });