Breadcrumb unusable with multiple ui-views

[dotnetwise]

When you have multiple ui-views, the ncyBreadcrumb.parent function gets executed for each of the views. This is not correct, you should be able to specify for what view/controller/scope to get the parent and label executed against.

How can you do that?

[ncuillery]

Right, I always had this issue in mind, it is the major reason why the module is still in 0.x.x version (it is a global issue, not specific to the parent property.

For me, the smartest way to resolve this bug is to add a new property in ncyBreadcrumb for state with multiple views:

$stateProvider
  .state('report',{
    ncyBreadcrumb: {
      label: 'Multiple views state',
      mainView: 'tabledata'
    },
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      },
    }
  })

where mainView points one of the view defined in the ui-router views property.

But I can't say yet if I can access to the multiple views of the state and generate the breadcrumb only with the main view.

[jamhall]

It would be fantastic if this is implemented - I am currently facing the same issue. +1 :-)

[jancel]

+1 It's popped up here too

[thisispaul]

+1 I think this would solve my current problem of the label not being parsed properly because of the different views.

[thisispaul]

I just had a look at this to try and solve it for myself.

I'm guessing the ideal place to check the mainView would be when getting the $lastViewScope on $viewContentLoaded but I can't see any way tosee what view a scope belongs to.

Any ideas?

[leedavidr]

+1, I don't have multiple views, but I define a single view in the state's views config object.

I'm not able to read the scope variable in the label.

[przemyslawlis]

+1

[slakin]

+1

[Sorackb]

Just did a pull request to solve this issue. #93

[brazorf]

+1 Any chance to see this pull request merged?

[ncuillery]

I thought this issue has been automatically closed by 934c5523208a9615d7cfa3abcb397bbe131332ac but I hasn't :smile:

[ncuillery]

I reopen the issue to remind myself I must mention the ncyBreadcrumbIgnore in docs (a new entry "FAQ" I think)

[ptitdje45]

@ncuillery Can you explain where i should use ncyBreadcrumbIgnore i'm a bit lost ..

[ptitdje45]

Example working here : http://plnkr.co/edit/yeODlzws6gv05tZ7nURd?p=preview

Note that if you are re-using the view somewhere else and you want to display the route. This will not work anymore. So try to find a way to 'true' or 'false' $scope.ncyBreadcrumbIgnore.

angular.module('app', ['ui.router', 'ncy-angular-breadcrumb'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('A', {
            abstract: true,
            url: '/a',
            views: {
                'a@': {
                    template: '<div>View A</div>',
                    controller: 'ACtrl'
                }
            }
        })
        .state('A.B', {
            url: '/b',
            views: {
                'b@': {
                    template: '<div>View B</div>',
                    controller: 'BCtrl'
                }
            },
            ncyBreadcrumb: {
                label: 'State {{tripleB}}'
            }
        });

    $urlRouterProvider.otherwise('/a/b');
  }])
  .controller('ACtrl', function($scope) {
    
    $scope.ncyBreadcrumbIgnore = true;
    console.log('a');
  }).controller('BCtrl', function($scope) {
    console.log('b');
    $scope.tripleB = 'BBB';
  })
  .run(function($rootScope, $location) {
    $rootScope.$location = $location;
  });