search

angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.53k stars 3k forks source link

Toggle ui-view template according current state #2987

Closed ShakurOo closed 8 years ago

ShakurOo commented 8 years ago

I trying to use one ui-view directive for two differentes states with two differents templates.

I have 3 levels of states :

  1. Profile (http://example.com/profil)
  2. Inbox (http://example.com/profil/inbox)
  3. Discussion (http://example.com/profil/inbox/discussion)
$stateProvider look's like :

     $stateProvider
        .state('profil', {
            url: '/profil',
            templateUrl: 'partials/profil.tpl.html',
            redirectTo: 'profil.activites',
            controller: 'profilCtrl',
            controllerAs: 'profil'          
        })  
        .state('profil.inbox', {
            url: '/inbox',
            metaTags: {
                title: 'inbox'
            },
            views: {
                'inbox' : {
                    controller: 'profilCtrl',
                    controllerAs: 'profil',
                    templateUrl: 'partials/tabs-profil/inbox.html',
                    resolve: {
                        user: function() {
                            ...
                        }
                    }                    
                }
            }
        }) 
        .state('profil.inbox.discussion', {
            url: '/:id_thread',
            metaTags: {
                title: 'Discussion with {{author}}'
            },
            views: {
                'inbox@profil.inbox' : {
                    controller: 'profilCtrl',
                    controllerAs: 'profil',
                    templateUrl: 'partials/tabs-profil/discussion.html',
                    resolve: {
                        user: function() {
                            ...                     
                        }
                    }                        
                }
            }
        })

The html look's like similar :

  <!-- INDEX -->
    <body>
        <div ui-view></div> <!-- Contain Profile -->
    </body>

    <!-- PAGE PROFIL -->
    <div id="profile">
        <uib-tabset>
            ...
            <uib-tab index="2" ui-sref="profil.inbox">
                <uib-tab-heading>
                    <label>Inbox</label>
                </uib-tab-heading>

                <div ui-view="inbox"></div> <!-- I WANT TOGGLE "TEMPLATE INOX" WITH "TEMPLATE DISCUSSION" BASED ON STATE -->                
            </uib-tab>
        </uib-tabset>
    </div>

    <!-- TEMPLATE INBOX -->
    <div id="inbox" class="tab">
     ...
    </div>

    <!-- TEMPLATE DISCUSSION -->
    <div id="discussion" class="tab">
     ...
    </div>

The ui-view in tab must change according the current state, any idea ?

Thank's

christopherthielen commented 8 years ago

I understand that when profil.inbox is active you want inbox.html to fill the ui-view='inbox', but when profil.inbox.discussion is active, you want the discussion.html to take the place of the inbox.html and fill the ui-view='inbox'.

I think you're on the right track, except that your view targeting looks wrong. I think 'inbox@profil.inbox' should be 'inbox@profil'.

When using view targeting in the profil.inbox state, the views: { 'inbox': ... is shorthand for 'inbox@profil' --- the ui-view named 'inbox' that was created in the parent (profil) state

In profil.inbox.discussion state, views: { 'inbox@profil.inbox': targets the ui-view named 'inbox' that was created in the profil.inbox state. However, that ui-view was created in the profil state.

Check out the view targeting documentation and the source for the sample app which does a similar thing