嗨,我正在用 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 。我可以知道我该如何处理这个问题吗?提前致谢。
最佳答案
如 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>
关于javascript - Angularjs 使用 ui-router 路由到不同的布局页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43361978/