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

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 允许您添加命名 View ，这可以帮助您指定用于您需要的路由的 View 。 因此，如果您需要一个具有状态 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>

因此，如果您需要特定的 url 来使用不同的 ui-view，您可以在 state 的 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>