角UI路由器

Question

我正在使用有角度的預定義外殼為新項目構建基本的工作環境。 基本模板是通過使用index.html中的ng-include加載的。 但是其他視圖使用ui-router鏈接到菜單組件。 代碼端的所有內容都很完美，但是運行Shell之后單擊菜單項時，我在加載視圖時遇到了問題。

我添加了href標記以檢查是否有效，但仍然沒有用。有人可以幫我這個忙。

<li ng-class="{active: $state.includes('app')}">
    <a href="">
        <i class="fa fa-desktop"></i> 
        <span class="nav-label">{{ 'APPVIEWS' | translate }}</span>                          
        <span class="pull-right label label-primary">SPECIAL</span>
    </a>
    <ul class="nav nav-second-level" ng-class="{in: $state.includes('app')}">
        <li ui-sref-active="active">
            <a ui-sref="app.contacts">Contacts</a>
        </li>   
    </ul>
</li>

我在配置文件中的狀態定義為：

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider) {
    IdleProvider.idle(5); 
    IdleProvider.timeout(120);

    $urlRouterProvider.otherwise("/dashboards/dashboard_1");

    $ocLazyLoadProvider.config({
        debug: false
    });

    $stateProvider
        .state('app', {
        abstract: true,
        url: "/app",
        templateUrl: "views/common/content.html",
    })
    .state('app.contacts', {
        url: "/contacts",
        templateUrl: "views/contacts.html",
        data: { pageTitle: 'Contacts' }
    })
}    

Answer 1

如果“ app”路線將是抽象的，則可以刪除其網址

該app.contacts可以具有該應用路線的父級

$stateProvider
    .state('app', {
    "abstract": true,
    templateUrl: "views/common/content.html",
})

因此，當我將“ app”路線設置為抽象路線並希望將所有其他視圖嵌套在該路線中時，我定義了一個命名視圖，它們將進入

所以我的“應用程序”模板就像

// html stuff here for app
<div ui-view="content"></div>
// more html stuff here

那么我的app.contacts路線看起來像

.state('app.contacts', {
    parent: "app"
    url: "/contacts",
    views: {
        "content": {
            templateUrl: "views/contacts.html"
        }
    },
    data: { pageTitle: 'Contacts' }
})