Question

我正在使用ui-router在AngularJs中开发一个站点。我有一种情况，按钮点击我需要更改并加载三个状态到该页面，三个看起来像图像。请帮助我如何加载多个页面。在一页

Answer 1

您需要像这样配置您的路由器配置：

$stateProvider
    .state("state1", {
        url: "/url1",
        controller: "FirstController",
        views: {
            view1: { templateUrl: "templates/template1.html" },
            view2: { templateUrl: "templates/template2.html" },
            view3: { templateUrl: "templates/template3.html" }
        }
    }).state("state2", {
        url: "/url2",
        controller: "SecondController",
        views: {
            view1: { templateUrl: "templates/template4.html" },
            view2: { templateUrl: "templates/template5.html" },
            view3: { templateUrl: "templates/template6.html" }
    }).state("state3", {
        url: "/url3",
        views: {
            view1: { 
                templateUrl: "templates/template7.html",
                controller: "ThirdController" 
            },
            view2: { 
                templateUrl: "templates/template8.html",
                controller: "FourthController" 
            },
            view3: { 
                templateUrl: "templates/template9.html",
                controller: "FifthController" 
            }
    });

因此，您需要提供有关每个州的每个视图的信息：您的视图使用的模板，控制器，解析等。然后您需要为您的ui-view容器命名（在此示例中为view1，view2，view3）。这就是ui-router如何知道每个视容容器需要使用哪些模板和控制器。

您的观点与此类似：

<section class="sidebar left">
    <div ui-view="view1"></div>
</section>

<section class="sidebar right login">
    <div ui-view="view2"></div>
</section>

<div ui-view="view3"></div>

AngularJS状态管理 - ＆gt;在一个页面中加载多个状态

1 个答案: