UI-Router 继承视图

问题描述

我的代码开始出现严重的重复.

有什么方法可以声明外部视图将从其继承的父视图吗?

我的代码如下:

 var header = { templateUrl: "partials/header/header.html"};var footer = { templateUrl: "partials/footer/footer.html"};$stateProvider.state('main', {网址:/"，意见:{标题":标题，"mainContent": { templateUrl: "partials/mainContent.html"},页脚":页脚}}).state('课程', {网址:/课"，意见:{标题":标题，"mainContent": { templateUrl: "partials/lesson/lesson.html"},页脚":页脚}}).state('注册', {网址:/注册"，意见:{标题":标题，"mainContent": { templateUrl: "partials/register/register.html"},页脚":页脚}}).state('404', {网址:/404"，意见:{标题":标题，"mainContent": { templateUrl: "partials/404/404.html"},页脚":页脚}});$urlRouterProvider.otherwise('/404');

解决方案

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

所以你应该能够设置类似

$stateProvider.state('root', {摘要:真实，意见:{'@':{控制器:'RootCtrl'},'header@':标题，'footer@':页脚}}).state('main', {网址:/"，父母:'根'，意见:{"@": { templateUrl: "partials/mainContent.html"},}}).state('课程', {网址:/课"，父母:'根'，意见:{"@": { templateUrl: "partials/lesson/lesson.html"},}})

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

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

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

到第一个@"块，或指定每个状态的控制器.

i'm beginning to have some serious repetitions in my code.

Is there any way to declare a father view that outer views will inherit from ?

my code is as below :

    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');

解决方案

You should be able to use the "parent" property to nest views, as described at https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

So you should be able to setup something like

$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"},
        }
    })

The above uses named views "header" and "footer", as well as an unnamed view for the "main" content of each page. So the template for the page would look something like

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

I've had a few problems using named views without templates or controllers, so if something isn't working, maybe add a template:

<ui-view />

to the first '@' block, or specify controllers in each state.

这篇关于UI-Router 继承视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！