javascript - 在 Jhipster 应用程序中合并 2 个 Angular 页面

Question

我有简单的 jhipster 应用程序并生成 2 个实体:Product 和 Category，如显示 here 。生成器创建页面来列出 Product和 Category分别为数据。

现在，假设我想创建将这两个页面合并在一个页面中的新页面:

combined.html

<div>
    <jhi-alert></jhi-alert>
    <div class="container-fluid">
        <uib-tabset>
            <uib-tab index="0" heading="Category">
                <div>Categories Goes Here..</div>
            </uib-tab>
            <uib-tab index="1" heading="Product">
                <div>Products Goes Here..</div>
            </uib-tab>
        </uib-tabset>
    </div>
</div>

combined.state.js

(function() {
'use strict';

angular
    .module('hipsterappApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider

    .state('combined/product-and-category', {
        parent: 'entity',
        url: '/combined/product-and-category',
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Combined Product and Category'
        },
        views: {
            'content@': {
                templateUrl: 'app/entities/combined/combined.html',
                controller: 'CombinedController',
                controllerAs: 'vm'
            }
        }
    });
}
})();

我的问题是，如何重复使用 products.html 和categories.html 中的页面，以便将其包含在combined.html 中？

我尝试使用ng-include，例如:

<div ng-include src="'app/entities/category/categories.html'"></div>

页面已包含，但数据未显示。有什么想法吗？

谢谢。

编辑1:

我将combined.html更改为具有如下ui View :

<uib-tab index="0" heading="Category">
    <div ui-view="category"></div>
</uib-tab>
<uib-tab index="1" heading="Product">
    <div ui-view="product"></div>
</uib-tab>

并更改combined.state.js:

.state('combined', {
    parent: 'entity',
    url: '/combined/product-and-category',
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: 'Combined Product and Category'
    },
    views: {
        'content@': {
            templateUrl: 'app/entities/combined/combined.html',
            controller: 'CombinedController',
            controllerAs: 'vm'
        },
        'category': {
            templateUrl: 'app/entities/category/categories.html',
            controller: 'CategoryController',
            controllerAs: 'vm'
        },
        'product': {
            templateUrl: 'app/entities/product/products.html',
            controller: 'ProductController',
            controllerAs: 'vm'
        }
    }
});

这样，页面/模板(products.html 和categories.html)根本不会显示。

Answer 1

您可以定义组合状态来管理 2 个 View ，请参阅 angular-ui router doc .