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 />

到第一个'@'块，或在每个州指定控制器。

Answer 2

您似乎只能使用ng-include作为标题和视图。如果它不依赖于视图路由，则转到ng-include。

你会像这样申请：

<div data-ng-include="header"></div> 
// $scope.header = "partials/header/header.html";

UI-Router继承视图

2 个答案: