Question

我正在尝试在我的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中并点击导航项目，例如＆＃39; business＆＃39;，我会被重定向到partials / business.html而不是嵌入的内容。

1）我可以互相嵌入多个ui视图吗？ 2）我是否正确嵌入了部分视图？

我已经浏览过互联网但无法找到解决方案。在此先感谢您的帮助！

Answer 1

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

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

如果您在查看完毕后仍然遇到问题，请告诉我。

Answer 2

您可以在另一个ui视图中定义ui视图。我已经按照以下方式实现了它，而且很直接。

在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等是我在user.html中使用ui-view加载的子文件。

我提供嵌套页面的链接：

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

根据需要，这可以扩展到其他父母及其子女。希望它有所帮助!!

多个UI视图无法按预期工作

2 个答案: