stateParams support in custom parent

[Wykks]

More specific than #32

It is possible to add param to a parent ?
Let's say I have something like this :

.state('showArticle', {
    ncyBreadcrumb: {
        label: '{{ articleName }}',
        parent: 'home'
    },
    url: '/article/:slug',
    controller: 'articleCtrl',
    templateUrl: 'article.html'
})
.state('editArticle', {
    ncyBreadcrumb: {
        label: 'Edit article {{ articleName }}',
        parent: //Here I need to specify "showArticle" with a 'slug' param
                //In this case, this fonction may generate the label of his parent
    },
    url: '/article/:slug/edit',
    controller: 'articleEditCtrl',
    templateUrl: 'articleEdit.html'
})

In order to end up with :
Home > An article > Edit

[ncuillery]

I think you don't use the UI-router well: In your case, the editArticle must be a child of showArticle, then you can benefit of all the features of the UI-router:

.state('showArticle.editArticle', { // the dot defiines a parent/child relation
    ncyBreadcrumb: {
        label: 'Edit article {{ articleName }}',
        parent: // No longer needed
    },
    url: '/edit', // Just the fragment after the parent state's url (no more duplicate) 
    views: {
        '@' : { // target the root view like before if you don't want to rework yours views 
            controller: 'articleEditCtrl',
            templateUrl: 'articleEdit.html'
        }
    }
})

BUT: have a look on #46: it allows url params when specifying ncyBreadcrumb.parent either it is a string or a function.

In your case, something like this should do the job:

.state('editArticle', {
    ncyBreadcrumb: {
        label: 'Edit article {{ articleName }}',
        parent: function ($scope) {
            var param = $scope.slug; // Or wherever is the slug value.
            return 'showArticle({slug: ' + param + '})';
        }
    },
    url: '/article/:slug/edit',
    controller: 'articleEditCtrl',
    templateUrl: 'articleEdit.html'
})

Pending the release, this feature is not yet documented.

I strongly recommend you to use the first solution (UI-router configuration update) :-)

[Wykks]

Oh right, I was aware of parent/child system, but I missed that part :

    views: {
        '@' : { // target the root view like before if you don't want to rework yours views 
            controller: 'articleEditCtrl',
            templateUrl: 'articleEdit.html'
        }
    }

That said, I'll keep in mind the other solution (in case of same parent, from different sources)
Thanks ! 👍

[VierenV]

Hi there,

I am building your first solution @ncuillery but it doesn't keep the scoped variables in the parents.
What I did

   .state('app.enterprises.detailsEnterprise', {
        url: '/:mail',
        views: {
            '@app' : {
                controller: 'enterpriseController',
                templateUrl: 'templates/enterprise.html'
            }
        },
        ncyBreadcrumb: {
          label: '{{client.entreprise}}' //Working great when we are on detailsEnterprise
        },
    })
    .state('app.enterprises.detailsEnterprise.detailsSite', {
        url: '/sites/:id',
        views: {
            '@app' : {
                controller: 'siteController',
                templateUrl: 'templates/site.html'
            }
        },
        ncyBreadcrumb: {
          label: '{{site.lieu.adresse}}' //Working great but we lose client.enterprise
        },
    })

Here I lose the client.enterprise when I move on detailsSite. Is it the expected behavior ?

[MrSpark2591]

This works for me.

.state('editArticle', {
    ncyBreadcrumb: {
    label: 'Edit article {{ articleName }}',
    parent: function ($scope) {
         var param = $scope.slug; // Or wherever is the slug value.
         return 'showArticle({slug:" ' + param + '"})'; // here we need to pass " for making it proper string other wise it will not pass param
       }
    },
    url: '/article/:slug/edit',
    controller: 'articleEditCtrl',
    templateUrl: 'articleEdit.html'
})