How to get $stateParams in parent view?

Question

I want to make tabs with tab-content. tab-content has it's own view. Here is code sample

(function () {
    angular
        .module('infirma.konfiguracja', ['ui.router'])
        .config(routeConfig)
    ;


    routeConfig.$inject = ['$stateProvider'];
    function routeConfig($stateProvider) {
        $stateProvider
            .state('app.konfiguracja', {
                url: 'konfiguracja/',
                views: {
                    'page@app': {
                        templateUrl: 'app/konfiguracja/lista.html',
                        controller: 'konfiguracjaListaCtrl',
                        controllerAs: 'vm'
                    }
                },
                ncyBreadcrumb: {label: "Ustawienia systemu"}
            })
            .state('app.konfiguracja.dzial', {
                url: '{dzial:.*}/',
                views: {
                    '[e-mail]': {
                        templateUrl: 'app/konfiguracja/dzial.html',
                        controller: 'konfiguracjaDzialCtrl',
                        controllerAs: 'vm'
                    }
                },
                ncyBreadcrumb: {label: "{{vm.nazwaDzialu}}"}
            })
        ;
    }
})();

I want to mark selected tab which is in parent state (app.konfiguracja).

Problem is that when entering url like /konfiguracja/firmy/ there is no $stateParams.dzial in app.konfiguracja controller

How to fix it?

Answer 1

I created working example for your scenario here. I would say, that there at least two ways.

The first, general way, how we should use the UI-Router and its selected params in parent views (to mark selected tab/link), should be with a directive **ui-sref-active**:

ui-sref-active="cssClassToBeUsedForSelected"

So this could be the usage:

<a ui-sref="app.konfiguracja.dzial({dzial: item.id})" 
      ui-sref-active="selected"
      >{{item.name}}</a> 

The second approach (my preferred) would be to use a reference Model, created in parent $scope, and filled in a child:

.controller('konfiguracjaListaCtrl', ['$scope', function ($scope, ) 
{
  $scope.Model = {};
}])

.controller('konfiguracjaDzialCtrl', ['$scope', function ($scope) 
{ 
  $scope.Model.dzial = $scope.$stateParams.dzial;
  // we should be nice guys and clean after selves
  $scope.$on("$destroy", function(){ $scope.Model.dzial = null });
}])

usage could be then like this

<span ng-if="item.id == Model.dzial">This is selected</span>

How is the second approach working? check the DOC:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

Check that all in action here