Question

您好我正在开发angularjs的SPA。我有两个布局页面。第一个布局页面（Index.html）中有一个名为Financial的选项卡。每当我点击该页面时，我想重定向到另一个布局页面。以下是我的index.html

  //All js,css,angular files.
                <li><a ui-sref="FAQ">FAQ's</a></li>
                <li><a ui-sref="Careers">Careers</a> </li>
                <li><a href="#">Offers & Deals</a> </li>
                <li><a ui-sref="Financial ">Financial Reports</a> </li>
                <div class="container">
                <div ui-view></div>
                </div>

每当我点击财务报告时，我想重定向到新的布局页面，并且不想在上面的ui-view中加载任何html。以下是我的标题https://plnkr.co/edit/m57BI5pivGzXD9UtwVtm?p=preview。我可以知道如何处理这个问题？提前谢谢。

Answer 1

正如ui-router-wiki中所述，ui-router允许您添加命名视图，这有助于您指定哪个视图用于您需要的任何路径。因此，如果您需要具有状态为landing的着陆页，则可以指定类似

的内容

 .state('landing', {
                    url: "/",
                    data: { pageTitle: 'Landing Page' },
                    views: {
                        'landing': {
                            templateUrl: "<template-url>",
                            controller: "LandingController",
                            controllerAs: "landing"
                                   }
                           }
                   });

允许您在index.html中指定ui-view

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

因此，如果您需要使用特定网址来使用不同的ui视图，您可以在州的views对象中指定。

 .state('alternateView', {
                    url: "/",
                    data: { pageTitle: 'Alternate page' },
                    views: {
                        'alternateUiViewTemplate': {
                            templateUrl: "<template-url>",
                            controller: "Alternate Controller",
                            controllerAs: "alternate"
                                   }
                           }
                   });

可让您添加到index.html并拥有额外的ui-view持有者

<div ui-view="landing"></div>
<div ui-view="alternateUiViewTemplate"></div>

Angularjs使用ui-router路由到不同的布局页面

1 个答案: