Question

我尝试使用一个ui-view指令用于两个不同的状态和两个不同的模板。

我有3个级别的状态：

个人资料（http://example.com/profil）
收件箱（http://example.com/profil/inbox）
讨论（http://example.com/profil/inbox/discussion）

$ stateProvider看起来像：

 $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() {
                        ...                     
                    }
                }                        
            }
        }
    })

html外观类似：

<!-- 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>

选项卡中的ui-view必须根据当前状态进行更改，但它不会有任何想法吗？

感谢＆＃39; S

根据当前状态

0 个答案: