AngularJS 中具有嵌套状态的嵌套视图

我正在尝试创建嵌套状态，但出了点问题，我不明白为什么。

我的角度应用程序中有这些状态：

/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状态没有改变内容。

My 索引.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>

My 客户端.tpl.html使用 ui-view“内容”：

<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

内容没有改变，实际上内容变空了。

UPDATE 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 is: /client/10/task

解决方案出奇地简单，但背后的概念可能有点具有挑战性。

所以状态定义应该是这样的

客户端根状态没有任何变化。它确实将其视图注入ui-view="main"根状态的（索引.html）

// CLIENT
.state('client', {
    ...
    views: {
        'main': {
            templateUrl: '/app/client/client.tpl.html',
            ...
        }
    }
})

现在，我们有了一级孩子。他们将瞄准ui-view="content"他们父母的（客户端及其模板注入ui-view="main")

.state('client.list', {
    views: {
        'content': {
    ....
})
.state('client.new', {
    url: '/new',
    views: {
        'content': {
    ...
})
...

所以到目前为止，一切都正常。下面是一个变化。我们再次尝试将模板注入ui-view="content"- 好的。但它没有在我们的父级中定义。它是在我们的祖父母 - a Client状态。所以我们跳过一级。我们必须使用绝对命名来定位视图名称

// TASKS
.state('client.details.task', {
    views: {
        // wrong
        'content': {
        // correct
        'content@client': {         
})
.state('client.details.task.new', {
    views: {
        // wrong
        'content': {
        // correct
        'content@client': {         
    }
})
...

现在应该清楚了。如果没有，也许这会有所帮助。第一级子级，即使使用这个状态定义也可以工作

.state('client.list', {
    views: {
        // working
        'content': {
        // also working
        'content@client': {
    ....
})

因为我们只是使用了绝对命名——它是开箱即用的（语法糖）。如需更多、更好的解释，请参阅文档：

视图名称 - 相对名称与绝对名称 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

小引用：

在幕后，每个视图都被分配一个绝对名称，该名称遵循以下方案：viewname@statename，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系人.项目。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})