多个 UI 视图未按预期工作答案

【问题标题】：Multiple UI-Views not working as expected多个 UI 视图未按预期工作
【发布时间】：2015-03-08 07:39:12
【问题描述】：

我试图在我的 AngularJS 应用程序中使用多个 UI 视图，但它没有按预期工作。该应用程序是一个仪表板。

我的目录结构如下：

index.html
app/
    app.js
    dashboard/
        dashboard.html
        dashboard.js
        partials/
            business.html
            items.html
            orders.html
            sales.html
    login/
        login.html
        login.js

我遇到的问题是我的 index.html 文件有以下代码行：

<div ui-view></div>

以上行使我的应用程序能够显示 login.html 页面和 dashboard.html 页面。现在我希望能够在我的 dashboard.html 页面中拥有部分视图，所以我也放了相同的代码行

<div ui-view></div>

为了能够在我的仪表板页面中嵌入部分视图。页面不是嵌入，而是只是重定向。因此，例如，如果我在 dashboard.html 中并单击“business”等导航项，我将被重定向到 partials/business.html 而不是嵌入的内容。

1) 我可以在彼此之间嵌入多个 ui 视图吗？ 2) 我是否正确嵌入了部分视图？

我已经搜索了互联网，但找不到解决方案。提前感谢您的帮助！

【问题讨论】：

标签： html angularjs angular-ui-router angularjs-routing

【解决方案1】：

您绝对可以拥有多个嵌入式视图。

查看这些 AngularJS UI-Router 教程：Nested Views 和 Multiple Named Views。

如果您在查看后仍有问题，请告诉我。

【讨论】：

几周前我遇到了同样的问题，我的头仍然很痛。我意识到没有一个像样的解决方案，除非您有一组明确定义的状态，可以映射嵌套视图。如果您（像我一样）需要动态的东西（例如 WPF），根本没有准备好，您必须自己创建一些东西（这是另一个痛苦）
如果任何给定的模块足够复杂，我倾向于将其拆分成更小的组成模块——每个模块都可以通过子状态（或命名视图，取决于）访问——并让子模块处理自己的内部路由。起初看起来很复杂，但很快就变成了老帽子。但我肯定听到了，如果有一些开箱即用的干净解决方案会很好。
我的 web（所以 AngularJS）经验还很短（几个月），但我对 WPF/.Net 框架有深入的了解，这真是太棒了，并且允许一个非常灵活但几乎完美的组件重用。但是，那是针对桌面的，我真的很怀念网络上类似的东西。目前，对于我的 Angular SPA 应用程序，我使用自定义模板系统解决了问题，该系统不使用 ng-view 技术，也不使用状态路由。准备好后，我会分享代码。
SamuelMS，我无法赞成您的评论，但效果很好！非常感谢你的帮助。我真的很感激！

【解决方案2】：

您可以在另一个 ui-view 中定义一个 ui-view。我已经按照以下方式实现了它，而且非常简单。

在 index.html 里面我有代码：

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

然后在 user.html 里面我有代码

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

我已经定义了一个配置来显示我的视图

     .config(function($urlRouterProvider, $stateProvider) {



     var users = {
        //Name must be in format Parent.Child
        name: 'users',
        url: '/user',
        templateUrl: 'users/user.html',
        controller: 'usersHandler',
        data: {
            pageTitle: 'Welcome to Users'
        },

    },

    createUsers = {
        name: 'users.createUsers',
        url: '/createUser',
        templateUrl: 'users/createUser.html',
        data: {
            pageTitle: 'Create Users'
        }
    },
    listUsers = {
        name: 'users.listUsers',
        url: '/listUsers',
        templateUrl: 'users/userLists.html',
        data: {
            pageTitle: 'Users listing'
        }
    },

    getUserDealer = {
        name: 'users.getUserDealer',
        url: '/getUserDealer',
        templateUrl: 'users/getUserDealer.html',
        data: {
            pageTitle: 'Users dealer listing'
        }
    },

    editUser = {
        name: 'users.editUser',
        url: '/editUser',
        templateUrl: 'users/editUser.html',
        data: {
            pageTitle: 'Edit User'
        }
    };
    //Similarly define all the combination you want to separate

   //add routes to stateProvider
    $stateProvider
        .state('users', users)
        .state('users.createUsers', createUsers)
        .state('users.listUsers', listUsers)
        .state('users.getUserDealer', getUserDealer)
        .state('users.editUser', editUser);

        $urlRouterProvider.otherwise('/user/listUsers');

        });

发生的事情是 user.html 是我的父文件，它加载在 index.html 中，editUser.html、getUserDealer.html 和 userLists.html 等是我使用 ui-view 在 user.html 中加载的子文件。

我将嵌套页面的链接提供为：

       <ul class="nav navbar-nav">
        <li><a href="#/user/createUser">NEW USER</a></li>
        <li><a href="#/user/listUsers">GET USER</a></li>
       </ul>

这可以根据需要扩展到其他父母及其子女。希望对你有帮助！！

【讨论】：