您好我正在开发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。我可以知道如何处理这个问题?提前谢谢。
答案 0 :(得分:2)
正如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>