2016-03-01 193 views
0

我遇到了一个新的状态问题,我添加到了我们的网站。角度路由器不会选择子状态(嵌套状态)

简短说明 我有一个状态(/page)'q.explorer',其中包含一个按钮;当点击它应该去一个孩子状态(名为'q.explorer.detail'),但它没有。但是:在日志记录中,我发现它确实尝试去那个(/ state),并且新的url按照子状态中的定义格式化。 但是,实际上使用的模板和控制器仍然是包含按钮的“父”...

这可能有点混淆解释;所以我也添加了一些代码,希望能够澄清我的问题。

的设置是这样的:

$stateProvider   
    .state('q', { 
     url: '/:locale/app', 
     data : { ui: "V2" }, 
     views: { 
      'application' : {template: '<div ui-view=""><page-home-v2></page-home-v2></div>' } 
     }, controller: function($scope, $stateParams, siteNavigation) { 
      siteNavigation.applyUrlParameters($stateParams); 
     } 
    }).state('q.explorer', { 
     url: '/explorer?:year&:month&:guide', 
     template: '<page-explorer-v2></page-explorer-v2>', 
     controller: function($scope, $stateParams, siteNavigation) { 
      console.log("controller: qlaro.explorer"); 
      siteNavigation.applyUrlParameters($stateParams); 
     } 
    }).state('q.explorer.detail', { 
     url: '/detail', 
     template: '<page-explorer-detail-v2></page-explorer-detail-v2>', 
     controller: function($scope, $stateParams, siteNavigation) { 
      console.log("controller: qlaro.explorer.detail"); 
      siteNavigation.applyUrlParameters($stateParams); 
     } 
    }) 


angular 
    .module('q.components') 
    .service('siteNavigation', function($state, $location) { 
     var service = this; 

     service.applyUrlParameters = function($stateParams) {     
      if (!$stateParams) $stateParams = $state.params; 

      console.log('Apply state parameters for state: ' + $state.current.name); 
      console.log('URL >> ' + $location.url()); 
     }; 
    }; 

在“q.explorer”模板深某处有一个按钮,打开详细视图(“q.explorer.detail”)。它使用此代码:

function goToDetail() { 
    var ui = $state.current.data.ui; 

    if (ui === "V1") { /*...*/ } 
    else if (ui === "V2") { 
     var params = { 
      year: Store.getYear(), 
      month: Store.getMonth(), 
      locale: Store.getLocale() 
     } 
     var guide = Store.getActiveSidebarItem(); 
     if (guide) params.guide = guide.slug; 
     console.log("go to explorer: " + params.guide); 

     $state.go('q.explorer.detail', params); 
    } 
    else console.log("Unable to go to state because the ui version is not known."); 
} 

这是我在控制台中看到点击链接后:

go to explorer: ebit 
controller: q.explorer 
Apply state parameters for state: q.explorer.detail 
URL >> /nl/app/explorer/detail?year=2015&month=11&guide=ebit 

正如你所看到的,它采用了“父” ISO儿童的控制器我想打开的页面。即使$ state.current.name是正确的...或者,也许我应该说它不会从状态改变...

任何帮助是值得欢迎的。

(PS:我们采用了棱角分明1.4.9)

+0

如下所示,该问题是在父级缺少的ui视图。因此,解决方案是编辑_'q.explorer__模板的模板:'

'' –

回答

2

看起来你正在使用嵌套的状态,使得q.explorer.detailq.explorer一个孩子。为了呈现孩子状态的模板,你还需要一个可放置的特定的ui-view。这将在父母国家的模板中进行搜索。获取console.log()输出仅仅意味着控制器被实例化,但即使模板根本没有被渲染,情况也是如此。

因此,检查q.explorer状态的模板中是否有ui-view。有关更多详细信息,请参阅:https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

您也可以通过不将q.explorer.detail设为q.explorer的孩子来解决此问题。只要你需要点符号,就会创建一个子状态。