Angularjs路由到不同的布局页面使用UI路由器

您好我正在开发SPA的angularjs。我有两个布局页面。第一个布局页面（Index.html）中有一个名为Financial的选项卡。每当我点击那个页面，我想重定向到另一个布局页面。下面是我的index.htmlAngularjs路由到不同的布局页面使用UI路由器

//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视图的任何HTML。以下是我的潜水员https://plnkr.co/edit/m57BI5pivGzXD9UtwVtm?p=preview。我可以知道我该如何处理？提前致谢。

来源

2017-04-12 Niranjan Godbole

你说的新的页面布局呢？ –

新页面（母版页）....当我重定向时，我不想显示当前菜单。目前我有常见问题，职业等，但当我重定向，我想重定向到另一个母版页。 –

但是这个母版页是指整个应用程序或外部应用程序中的一个页面？ –

如在ui-router-wiki中所述，ui-router允许您添加命名视图，以帮助您指定哪个视图用于您需要的任何路径。所以，如果你需要有状态landing一个登陆页面，你可以指定类似，

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

，它可以让你设置的index.html像

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

用户界面视图所以，如果你需要有一个特定的url使用不同的UI视图，你可以在views状态的对象中指定。

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

，它可以让你加入到index.html，然后有一个额外的用户界面视图架，

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

来源

2017-04-12 07:36:48 32teeths

但会解决导航栏的问题？ – sTx

谢谢。在ui-view =“landing”中，我应该加载index.html和ui-view =“alternateUiViewTemplate”，我应该可以加载其他页面。我对吗？ –

@sTx对不起，dint让你。 – 32teeths

Angularjs路由到不同的布局页面使用UI路由器

回答

相关问题