javascript - AngularJS 中具有嵌套状态的嵌套 View

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>

我的 client.tpl.html 带有 ui-view“content”:

<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

---

Answer 1

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

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

客户端根状态没有任何变化。它确实将其 View 注入(inject)根状态的 ui-view="main" (index.html)

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

现在，我们有第一级 child 。他们将以其父的ui-view="content"为目标(客户端及其模板注入(inject)ui-view="main")/p>

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

到目前为止，一切正常。下面是一个变化。我们再次尝试将我们的模板注入(inject) ui-view="content" - 很好。但是它没有在我们的 parent 中定义。它处于我们的 grand-parent - Client 状态。所以我们跳过了一个级别。我们必须使用绝对命名来定位 View 名称

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

因为我们只是使用绝对命名 - 它是开箱即用的(语法糖)。有关更多甚至更好的解释，请参阅文档:

View Names - Relative vs. Absolute Names

小引用:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

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