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

我试图创建嵌套状态，但有些地方出了问题，我不知道为什么

我的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)

所有状态都在工作，但

任务

状态不会更改内容

带有

ui视图“main”

的My index.html：

任务状态

    // 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

一切正常，内容会发生变化，但当我单击转到：

/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

---

---

解决方案非常简单，但背后的概念可能有点挑战性

所以州的定义应该是这样的

客户端根状态没有任何更改。它确实将其视图注入根状态（index.html）的

ui view=“main”

现在，我们有了一级儿童。他们将以其父代的

ui-view=“content”

为目标（客户机及其模板注入

ui-view=“main”

）

所以直到现在，一切都在运转。下面是一个变化。我们再次尝试将模板注入

ui view=“content”

-很好。但在我们的父母中没有定义。它处于我们的祖父母-一个

客户

状态。所以我们跳过了一个级别。我们必须使用绝对命名作为视图名称目标

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

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

因为我们只是使用了绝对命名——在这里，它是为我们做的开箱即用（语法糖）。有关更多甚至更好的解释，请参阅文档：

小引用：

在幕后，每个视图都会被分配一个绝对名称，该名称遵循

viewname@statename

，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称

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

---

非常感谢你！你的回答太棒了！！！我理解一切，你是对的，这很简单，但有一点挑战，我明白。再次感谢你！=）如果这有帮助的话，那就太好了；）享受奇妙的

UI路由器

；）

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

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

// 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': {
    ....
})

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