UI-Router继承视图

Question

我的代码中开始有一些严重的重复.

有没有办法声明外部视图将继承的父视图？

我的代码如下:

    var header = { templateUrl: "partials/header/header.html"};
    var footer = { templateUrl: "partials/footer/footer.html"};

    $stateProvider
        .state('main', {
            url: "/",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/mainContent.html"},
                "footer": footer
            }
        })
        .state('lesson', {
            url: "/lesson",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/lesson/lesson.html"},
                "footer": footer
            }
        })
        .state('register', {
            url: "/register",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/register/register.html"},
                "footer": footer
            }
        })
        .state('404', {
            url: "/404",
            views: {
                "header": header,
                "mainContent": { templateUrl: "partials/404/404.html"},
                "footer": footer
            }
        });

    $urlRouterProvider.otherwise('/404');

Answer 1

您应该能够使用"parent"属性来嵌套视图,如https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views中所述

所以你应该能够设置类似的东西

$stateProvider
    .state('root', {
      abstract: true,
      views: {
        '@': {
            controller: 'RootCtrl'
        },
        'header@': header,
        'footer@': footer
       }
    })
    .state('main', {
        url: "/",
        parent: 'root',
        views: {
            "@": { templateUrl: "partials/mainContent.html"},
        }
    })
    .state('lesson', {
        url: "/lesson",
        parent: 'root',
        views: {
            "@": { templateUrl: "partials/lesson/lesson.html"},
        }
    })

上面使用命名视图"header"和"footer",以及每个页面的"主要"内容的未命名视图.所以页面的模板看起来像

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

我在使用没有模板或控制器的命名视图时遇到了一些问题,所以如果某些东西不起作用,可能会添加一个模板:

<ui-view />

到第一个'@'块,或在每个状态中指定控制器.