ncuillery / angular-breadcrumb

Generate a breadcrumb from ui-router's states
http://ncuillery.github.io/angular-breadcrumb/
MIT License
785 stars 183 forks source link

label function support #63

Open dotnetwise opened 9 years ago

dotnetwise commented 9 years ago

It should work exactly the same way as parent

ncuillery commented 9 years ago

Have you faced a situation where you could have need this feature?

I ask myself if this feature could be useful because the label can already be a expression calling a function in the scope:

// config
$stateProvider.state('main', {
  [...],
  ncyBreadcrumb: {
    label: '{{getBreadcrumbLabel()}}'
  }
})

// controller
$scope.getBreadcrumbLabel = function() {
  // Something with scope here
}

Anyway, thanks for the suggestion.

dotnetwise commented 9 years ago

Yes, when having multiple views it binds to every scope of every view, which is wrong. Besides the logic of The breadcrumb should be in the provider config not in the scope

-----Original Message----- From: "Nicolas Cuillery" notifications@github.com Sent: ‎14/‎12/‎2014 06:20 PM To: "ncuillery/angular-breadcrumb" angular-breadcrumb@noreply.github.com Cc: "dotnetwise" laurentiu.macovei@dotnetwise.com Subject: Re: [angular-breadcrumb] label function support (#63)

Have you faced a situation where you could have need this feature? I ask myself if this feature could be useful because the label can already be a expression calling a function in the scope: // config $stateProvider.state('main', { [...], ncyBreadcrumb: { label: '{{getBreadcrumbLabel()}}' } })

// controller $scope.getBreadcrumbLabel = function() { // Something with scope here }Anyway, thanks for the suggestion. — Reply to this email directly or view it on GitHub.=

ncuillery commented 9 years ago

OK, it could be a nice feature for v0.4.x

ghost commented 9 years ago

Hi,

I was wondering the same thing. And I tried what you suggested @ncuillery, passing a scope function to the label, but it doesn't display what I return.

Here's a quick example, maybe I'm doing something wrong: http://plnkr.co/edit/Uj8RTNqbPNKx9q9cHohp

Thanks for looking into it.

ghost commented 9 years ago

Ok, after a bit of search, I'm logging line 211, parseLabel(viewScope), and that runs a few times (more and more times each time I visit the page without reloading if that makes sense...), and on some runs, I get the result from my function but at the end run I do not. So I don't understand.

It goes like so: Home Forums: Home Forums: myForum Home Forums: Home Forums:

So I guess that because the last run gives an empty response, that's why my code isn't showing. But don't know why...

sturay commented 9 years ago

It is perhaps worth noting that using the above approach, I was only able to output the function after injecting $rootScope into the controller. So,

// controller
$scope.getBreadcrumbLabel = function() {
  // Something with scope here
}

would become:

// controller
$rootScope.getBreadcrumbLabel = function() {
  return $scope.parent.child;
}
fgarit commented 9 years ago

I would also see the use for having a function for label. function($scope, $state) Maybe the function could return a promise that would be waited on before displaying.

Basically, I've got states that have have a parent state with a dynamic label. And I would like for there to be a way to handle that.

Home > user name > current state

"user name" would be a state such as "site.user({id: 12})", and I would like in the label function to be able to perform a backend query to get the name of the user and output it there.

While it's true the backend query can be done in the current state and some scope var can be set to print the user name, I would prefer if the current state didn't have to handle that. I would like each state to handle its own labeling.

fgarit commented 9 years ago

I guess ideally, I would like to have a breadCrumb builder like:

.state('site.users', {
  url: '/users/{id:[0-9]+}',
  templateUrl: 'users.html',
  controller: 'UsersController',
  ncyBreadcrumb: {
        builder: function($injector, $state) {
            var someService = $injector.get('someService');
            var $q = $injector.get('$q');
            var deferred = $q.defer();
            someService($state.params.id).then(function(result) {
              deferred.resolve({ label : result.label, parent : result.parent });
            }
            return deferred.promise;
        }
  }
})

In the meantime, I've been thinking of using the getStatesChain function and at each state update, run some function on each state to build its label (at least for the states that have a dynamic label).

bautistaaa commented 9 years ago

this would be helpful, i have multiple controllers using the same state and in order to render their own custom breadcrumbs I have to attach the same function in each controller vs being able to pass in a provider or service

ncyBreadcrumb:{
    label:  function(myService, $stateParams) {
                  return myService.getLabel($stateParams.id);
              }
 }

if there way I can accomplish this?

shirk3y commented 9 years ago

+1

ng-breadcrumbs seems to support it: https://github.com/ianwalter/ng-breadcrumbs#adding-dynamic-route-labels.

leedavidr commented 9 years ago

+1

goliney commented 8 years ago

+1 for ability to use $stateParams in label, as @bautistaaa suggested

inaccessible commented 8 years ago

+1

ncuillery commented 8 years ago

Related to #105

stramel commented 8 years ago

Also related to #146