如何替换一个单一的ui-视图，如果我有多个ui-视图在一个单一的html

How to replace a single ui-view , If I have Multiple ui-views in a single html

本文关键字：一个 ui- 视图 单一 html 替换 何替换 如果      更新时间：2023-09-26

我在Angular应用程序中使用ui-router进行路由。我的页面在一个html中有3个ui-view，就像这样

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

OnClick的东西在头部，我必须路由ui-view="content"第二ui-view="content2"。但是页眉&页脚将保留。如何做到这一点?

可以用嵌套状态来解决。

$stateProvider
    .state('parent', {
        abstract: true,
        views: {
            header: {
                templateUrl: 'header.html'
            },
            footer: {
                templateUrl: 'footer.html'
            },
            content: {
                template: '<div ui-view></div>'
            }
        }
    })
    .state('parent.child1', {
        url: '/child1',
        templateUrl: 'child1.html'
    })
    .state('parent.child2', {
        url: '/child2',
        templateUrl: 'child2.html'
    });

您也可以尝试这样做。这对我很有效。

.state('app', {
    abstract: true,
    url: "/",
    templateUrl: 'partials/app.html',
    controller: 'MainCtrl'
})
.state('app.content1', {
    url: "",
    views: {
        'header': {
            templateUrl: "partials/header.html",
        },
        'footer': {
            templateUrl: 'partials/footer.html',
        },
        'content': {
            templateUrl: "partials/content1.html",
            controller: 'FirstContentCtrl',
        }
    }
})
.state('app.content2', {
    url: "",
    views: {
        'header': {
            templateUrl: "partials/header.html",
        },
        'footer': {
            templateUrl: 'partials/footer.html',
        },
        'content': {
            templateUrl: "partials/content2.html",
            controller: 'SecondContentCtrl',
        }
    }
})
相关文章：