Javascript AngularJS中的嵌套视图不工作

我已为我的应用程序设置了以下路由：

$stateProvider
    .state('mac', { // domain.com/mac
        url: "/mac",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.home.html'
            }
        }
    })
    .state('mac.design', { // domain.com/mac/design
        url: "/design",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.design.html'
            }
        }
    })
    .state('mac.features', { // domain.com/mac/features
        url: "/features",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.features.html'
            }
        }
    })
    .state('iphone', { // domain.com/iphone
        url: "/iphone",
        views: {
            'body': {
                templateUrl: 'partials/products/iphone.body.html'
            },
            'content': {
                templateUrl: 'partials/products/iphone.home.html'
            }
        }
    })
    ...

index.html

如下所示：

<div ui-view="body"></div>

最后在

mac.home.html

中：

<div ng-include="'partials/header.html'"></div>

<div class="view-container">
    <div ui-view="content" class="view-frame"></div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1>Mac</h1>

        </div>
    </div>
</div>

---

所以基本上我可以选择哪个视图显示什么。但是它是如何让contentFile视图在嵌套在另一个视图中时被状态看到的，就像这样…

您的状态定义说，您将有一个带有主体和内容视图的主状态，但是根据您所描述的，您将内容视图定义为主体视图的子视图，而不是您的主状态。基本上，你是在说你会这样做：

主页状态的

index.html

：

<div ui-view="body"></div> 
<div ui-view="content"></div> 

然而，您实际正在做的是：

<div ui-view="body">
  <div ui-view="content"></div> 
</div> 

这意味着您已使内容视图成为主体的子视图，而不是主状态下的子视图

---

看看这个。

这就是我努力工作的地方：

$stateProvider
    .state('home', {
        abstract: true,
        url: "/",
        views: {
            'body': {
                templateUrl: 'partials/home/home.body.html'
            }
        }       
    })
    .state('home.index', {
        url: "",
        views: {
            'content': {
                templateUrl: 'partials/home/home.content.html'
            }
        }
    })

所以基本上我建立了一个主基态，然后建立了一系列子态，这些子态将从顶层状态继承。。。在实践中使用时有意义，这意味着您可以在每个实际状态以及继承中拥有多个视图

重要提示：需要注意的是，由于状态是抽象的，您不能再链接到状态

home

，因此最好的方法是不必链接到

home.index

，如下所示：

$stateProvider
    .state('base', {
        abstract: true,
        url: "/",
        views: {
            'body': {
                templateUrl: 'partials/home/home.body.html'
            }
        }       
    })
    .state('home', {
        parent: 'base',
        url: "",
        views: {
            'content': {
                templateUrl: 'partials/home/home.content.html'
            }
        }
    })

---

这意味着您可以使用home作为您的状态，但它将使用base作为父级。

那么执行第二段代码的解决方案是什么？因为它是相同的状态，所以我不会创建像“home.content”这样的嵌套状态，或者我会吗？因为用户无法访问它。我不确定您的场景是什么……也许可以将内容视图移到主体视图之外，使其不是主体视图的子视图？你可以制作身体和内容的子状态。用户可以访问这些，你可以把主页抽象化，把你的登录页变成一个孩子的主页。基本上，我希望为每个主要部分（如Mac、iPhone）加载不同的正文模板，然后为每个子区域加载不同的内容模板。如果您的正文和内容视图处于一种状态，如Mac，然后具有子状态，如Mac。design还声明正文和内容视图，你知道mac.design会显示两个州的正文和内容视图，对吗？是的，那很好，就是这个想法。否则，我将不得不使用大量的partials和include，但通过尝试这样做，我可以为每个产品（在本例中）使用不同的全局容器，然后为每个州使用不同的内容文件。然后我可以使用include来处理更简单的东西，比如页眉、页脚和菜单等。如果这些都有意义的话？

$stateProvider
    .state('base', {
        abstract: true,
        url: "/",
        views: {
            'body': {
                templateUrl: 'partials/home/home.body.html'
            }
        }       
    })
    .state('home', {
        parent: 'base',
        url: "",
        views: {
            'content': {
                templateUrl: 'partials/home/home.content.html'
            }
        }
    })