在UI路由器中將嵌套狀態用作選項卡

Question

在這種特殊情況下，文檔似乎有些稀疏，但是我正在本教程的“關於頁面的多視圖”部分中進行工作， 本 SO帖子對此提供了支持。

我正在嘗試將我的頁面之一轉換為將每個選項卡呈現為子狀態的父狀態。 下面的語法不會引發錯誤，但是僅呈現選項卡標題，而沒有內容。 我已經在子控制器的init函數中設置了斷點，並且沒有任何反應，並且在控制台中沒有出現任何錯誤。 我還在$stateChangeError回調中創建了一個斷點，那里也什么也沒有。

母國

<div class="container">
    <h2> <i class="fa fa-user"></i> Click to Call Settings for {{user.fullName}}</h2>
    <uib-tabset active="active" id="usersettings">
        <uib-tab index="0" heading="SIP Settings"> 
            <div ui-view="sipSettings"></div> 
        </uib-tab>   
        <uib-tab index="1" heading="Favorites"> 
            <div ui-view="favorites"></div>       
        </uib-tab>
    </uib-tabset>  
</div>>

favoritePartial.html（為節省空間而進行了編輯）

<form name="favoritesForm">
    <div ng-repeat="favorite in pbxFavorites" id="favoritesContainer">

    </div>
</form>
<div class="form-footer">
    <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
    <button type="submit" class="btn btn-primary" ng-click="saveFavorites()">Save Favorites</button>
</div> 

sipSettingsPartial.html（為節省空間而進行了編輯）

<form name="sipSettingsForm">
    <div class="row">

    <div class="form-footer">
        <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
        <button type="submit" class="btn btn-primary" ng-click="savePbxSettings()">Save Settings</button>
    </div>  
 </form>

國家提供者

        .state('clickToCall', {
            url: '/clickToCall',
            templateUrl: 'app/components/clickToCall/clickToCall.html',
            controller: 'ClickToCallController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'parentResolves',  'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
                    if($rootScope.isLoggedIn()){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NO_ACCESS);
                    }
                }]
            },
            params:{
                'user':''
            },
            view:{
                'sipSettings@clickToCall': {
                    templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
                    controller: 'SipSettingsController'
                },
                'favorites@clickToCall':{
                    templateUrl: 'app/components/clickToCall/favoritesPartial.html',
                    controller: 'FavoritesController'
                }
            }
        })

文件夾結構

屏幕截圖

Answer 1

愚蠢的拼寫錯誤……命名為截面view而不是views ，這也使templateUrl處於父狀態。 以下配置有效：

        .state('clickToCall', {
            url: '/clickToCall',
            controller: 'ClickToCallController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'parentResolves',  'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
                    if($rootScope.isFirmAdmin2 || $rootScope.isCloud9){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NO_ACCESS);
                    }
                }]
            },
            params:{
                'user':''
            },
            views:{
                '':{
                    templateUrl: 'app/components/clickToCall/clickToCall.html'
                },
                'sipSettings@clickToCall': {
                    templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
                    controller: 'SipSettingsController'
                },
                'favorites@clickToCall':{
                    templateUrl: 'app/components/clickToCall/favoritesPartial.html',
                    controller: 'FavoritesController'
                }
            }
        })