Question

我在Angular App中使用ui-router进行路由。我的页面在这样的单个HTML中有3个ui-views

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

点击标题中的内容，我必须路由ui-view =＆＃34;内容＆＃34;第二个ui-view =＆＃34; content2＆＃34;。但标题＆amp;页脚将保留。怎么做到这一点？

Answer 1

可以用嵌套状态解决。

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

Answer 2

你也可以尝试这样的事情。它对我有用。

.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',
        }
    }
})

如何替换单个ui-view，如果我在一个html中有多个ui-views

2 个答案: