javascript - AngularJS のネストされた状態を持つネストされたビュー

Question

ネストされた状態を作成しようとしていますが、何かが間違っていて、その理由がわかりません。

私のAngularアプリにはこれらの状態があります：

/client (list clients)
/client/:id (show client)
/client/new (new client)

そして今、私はやろうとしています:

/client/:id/task (list clients tasks)
/client/:id/task/new (create new task for this client)
/client/:id/task/:idTask (show the client task)

すべての状態が機能していますが、task状態はコンテンツを変更していません。

私のindex.htmlとui-view "main"：

<section id="container">
    <header></header>
    <sidebar></sidebar>
    <section class="main-content-wrapper" ng-class="{'main':collapse}">
        <section id="main-content">
            <div ui-view="main"></div>
        </section>
    </section>
</section>

UIビュー「コンテンツ」を含む私のclient.tpl.html ：

<div class="row">
    <div class="col-md-12">
        <ul class="breadcrumb">
            <li><a href ui-sref="home">Home</a></li>
            <li class="active">Clients</li>
        </ul>
    </div>
</div>
<div ui-view="content"></div>

私のアプリの状態：

$stateProvider
    .state('/', {
        url: '/',
        templateUrl: '/app/application/application.tpl.html',
        abstract: true
    })

    // CLIENT
    .state('client', {
        url: '/client',
        abstract: true,
        views: {
            'main': {
                templateUrl: '/app/client/client.tpl.html',
                controller: 'ClientController'
            }
        }
    })
    .state('client.list', {
        url: '/list',
        views: {
            'content': {
                templateUrl: '/app/client/client.list.tpl.html',
                controller: 'ClientListController'
            }
        }
    })
    .state('client.new', {
        url: '/new',
        views: {
            'content': {
                templateUrl: '/app/client/client.new.tpl.html',
                controller: 'ClientNewController'
            }
        }
    })
    .state('client.show', {
        url: '/:id',
        views: {
            'content': {
                templateUrl: '/app/client/client.show.tpl.html',
                controller: 'ClientShowController',
            }
        }
    })

タスクの状態

    // TASKS
    .state('client.details', {
        url: '/:idClient',
        abstract: true,
        views: {
            'content': {
                templateUrl: '/app/task/task.tpl.html',
                controller: 'TaskController'
            }
        }
    })
    .state('client.details.task', {
        url: '/task',
        views: {
            'content': {
                templateUrl: '/app/task/task.list.tpl.html',
                controller: 'TaskListController'
            }
        }
    })
    .state('client.details.task.new', {
        url: '/new',
        views: {
            'content': {
                templateUrl: '/app/task/task.new.tpl.html',
                controller: 'TaskNewController'
            }
        }
    })
    .state('client.details.task.show', {
        url: '/:idTask',
        views: {
            'content': {
                templateUrl: '/app/task/task.show.tpl.html',
                controller: 'TaskShowController'
            }
        }
    });

したがって、クリックして移動すると：

/client
/client/:id
/client/new

すべてが正常に機能し、コンテンツが変更されますが、クリックして移動すると:

/client/:id/task
/client/:id/task/:idTask
/client/:id/task/new

内容は変わりません。実際には、内容は空になります。

---

更新 1

タスク リストへのリンクはサイドバーにあります。サイドバーはディレクティブです。

指令：

.directive('sidebar', [function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/common/partials/sidebar.html'
    };
}])

テンプレート：

<aside class="sidebar" ng-class="{'sidebar-toggle':collapse}" ng-controller="SidebarController as sidebar">
    <div id="leftside-navigation" class="nano">
        <ul class="nano-content">
            <li class="active">
                <a href ui-sref="home"><i class="fa fa-dashboard"></i><span>Home</span></a>
            </li>
            <li class="sub-menu">
                <a href ng-click="toggle()">
                    <i class="fa fa-users"></i>
                    <span>Clients</span>
                    <i class="arrow fa fa-angle-right pull-right"></i>
                </a>
                <ul style="height: {{height}}px; overflow: hidden;">
                    <li ng-repeat="client in session.clients">
                        <a href ui-sref="client.details.task({id:client.id})">{{client.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</aside>

リンクui-srefは次のとおりです。/client/10/task

---