Question

我有2个html页面，其行为类似于其他人将继承的抽象页面。

menu.html 将呈现主菜单标题，如下所示

listaAcoes.html 会呈现2个标签，如下所示

但是我需要将一些页面一起渲染，如下面的图像

但我有些疑惑。我将menu.html声明为抽象以允许继承，我为listaAcoes.html做了同样的事情。

如何让新页面继承这两个页面以达到我的目标，如上图所示？

JS

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('listaacao', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/listaAcoes.html",
            controller: 'ListaAcaoCtrl'
        })

        .state('app.minhasAcoesOutrasMetas', {
            url: '/minhasAcoesOutrasMetas',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesOutrasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })

        .state('listaacao.minhasAcoes', {
            url: '/minhasAcoes',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesMinhasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        });
});

Answer 1

这个设计对我来说有点奇怪，但鉴于代码发布的次数很少，我无法指出。

就你的问题而言，也许这样的事情会起作用：

// define a hybrid view: templates/hybrid.html
<div id="hybridview">
    <div ui-view="menu"></div> <!-- menu goes here -->
    <div ui-view="listaacao"></div> <!-- listaAcoesgoes here -->
    <div ui-view></div> <!-- content of inherited views goes here -->
</div>


.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })
        .state('listaacao', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/listaAcoes.html",
            controller: 'ListaAcaoCtrl'
        })
        .state('hybrid', {
            url: "/app",
            abstract: true,
            views: {
                '': {
                    templateUrl: "templates/hybrid-layout.html",
                    controller: 'HybridCtrl' // You'll need to define this ctrl if you need it --- otherwise remove this line.
                },
                'menu@hybrid': {
                    templateUrl: "templates/menu.html",
                    controller: 'AppCtrl'
                },
                'listaacao@hybrid': {
                    templateUrl: "templates/listaAcoes.html",
                    controller: 'ListaAcaoCtrl'
                }
        })
        .state('app.minhasAcoesOutrasMetas', {
            url: '/minhasAcoesOutrasMetas',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesOutrasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })
        .state('listaacao.minhasAcoes', {
            url: '/minhasAcoes',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesMinhasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })


        // sample child state of hybrid abstract state... you will need to define view and ctrl
        .state('hybrid.hybridChild', {
            url: '/hybridChild',
            views: {
                'menuContent': {
                    templateUrl: 'templates/HybridChildView.html',
                    controller: 'HybridChildViewController'
                }
            }
        });
});

允许单个HTML页面继承2页

1 个答案: