Question

我试图制作嵌套状态，但有些事情是错误的，我无法弄清楚原因。

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

/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＆＃34;内容＆＃34;：

<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

解决方案令人惊讶的简单，但背后的概念可能有点挑战。

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

客户端根状态没有任何变化。它确实将其视图注入根状态的ui-view="main" （index.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" - 好。但它没有在我们的父母中定义。它位于我们的 grand-parent - 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': {
    ....
})

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

View Names - Relative vs. Absolute Names

小引用：

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

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

AngularJS中嵌套状态的嵌套视图

1 个答案:

View Names - Relative vs. Absolute Names