使用嵌套状态作为ui-router中的选项卡

Posted 2021-04-17

在这个特殊情况下，文档看起来有点稀疏，但是我正在使用this SO帖子支持的this教程的“Multiple Views About Page”部分。

我正在尝试将我的一个页面转换为父状态，将每个选项卡呈现为子状态。下面的语法不会引发错误，但只有标签标题呈现，没有内容。我在子控制器的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>>

favoritesPartial.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'
                }
            }
        })

文件夹结构

屏幕截图

答案

愚蠢的错字......命名为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'
                }
            }
        })