Question

我正在使用Angular 1.6.2和UI路由器。我仍在努力正确地学习这些概念，但已经走到了路边。

我有一个名为app的父状态，使用MainController和一堆子状态。但是，我现在想通过让孙子国家更深入一级。

以下代码在加载www.example.com/manage-users/edit/1时因为没有加载祖父母状态而给我留下空白页。

然而，如果我让app成为edit-users的父级（我想要深入第三级的父级），它确实有效，但这不是真正的正确方法。因为在此之后我还需要使用父状态。

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">
    // loading JS/CSS etc
</head>
<body ng-app="sampleApp">
<div class="container">
    <div ui-view></div>
</div>
</body>
</html>

parent.html

<div ng-controller="MainController as data">
    // more html
    <div ui-view></div>
</div>

管理-users.html

<div class="col-sm-12" ng-controller="UserController as data">
    // more html 
    <div ui-view></div>
</div>

manage-users-edit.html（仅当我将父状态'app'代替'manage-users'

时才有效

<div>Hello World! This is the Edit HTML Page</div>

app.js设置状态

$stateProvider
    .state('app', {
        templateUrl: 'views/parent.html',
        controller: 'MainController as data'
    })
    .state('manage-users', {
        parent: 'app',
        url: '/manage-users',
        templateUrl: 'views/manage-users.html',
        controller: 'MainController as main'
    })
    .state('edit-users', {
        parent: 'manage-users',
        url: '/manage-users/edit/:id',
        templateUrl: 'views/manage-users-edit.html',
        controller: 'MainController as main'
    });

Answer 1

试试这个：

<强>的index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        // loading JS/CSS etc
    </head>
    <body ng-app="sampleApp">
        <div class="container" ui-view="container"></div>
    </body>
</html>

<强> parent.html

<div ng-controller="MainController as data">
    // more html
    <div ui-view="parent"></div>
</div>

管理-users.html

<div class="col-sm-12" ng-controller="UserController as data"> // more html <div ui-view="manageusers"></div> </div>

<强> app.js

$stateProvider .state('app', { views:{ 'container': { templateUrl: 'views/parent.html', controller: 'MainController as data' } } }) .state('app.manage-users', { url: '/manage-users', views:{ 'parent':{ templateUrl: 'views/manage-users.html', controller: 'MainController as main' } } }) .state('app.manage-users.edit-users', { url: '/edit/:id', views:{ 'manageusers':{ templateUrl: 'views/manage-users-edit.html', controller: 'MainController as main' } } });

您应始终导航到层次结构的子级。在这种情况下，$state.go('app.manage-users.edit-users')

修改

状态配置中的URL属性错误。要达到预期目标，您应该输入http://exapmle.com/#/manage-users/edit/1。

我已更新配置，因此会删除网址中的额外管理用户。试一试。

无法让孙子州使用UI路由器

1 个答案: