angular 路由器没有 select 子状态（嵌套状态）

Question

我在添加到我们网站的新状态时遇到问题。

简短描述 我有一个包含按钮的状态 (/page)'q.explorer'；单击时，它应该进入子状态（名为 'q.explorer.detail'），但事实并非如此。但是：在日志记录中，我看到它确实尝试转到那个 (/state)，并且新的 url 被格式化为子状态中定义的格式。但实际使用的模板和控制器仍然是包含按钮的 'parent' ...

这可能解释起来有点混乱；所以我还添加了一些代码，希望这能澄清我的问题。

设置如下所示：

$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.");
}

这是我在单击 link 后在控制台中看到的内容：

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

如您所见，它使用 'parent' iso 我要打开的子页面的控制器。即使 $state.current.name 是正确的......或者我应该说它不会从状态改变......

欢迎任何帮助。

(PS: 我们正在使用 Angular 1.4.9)

Answer 1

看起来您正在使用嵌套状态，因此 q.explorer.detail 是 q.explorer 的 child。要呈现 child 状态的模板，您还需要一个特定的 ui-view 可以放置它的地方。而这个会在parent状态的模板中进行搜索。获得 console.log() 输出仅意味着控制器已实例化，但即使根本未呈现模板也会发生这种情况。

所以检查一下你在q.explorer状态的模板里有没有ui-view。详情请见：https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

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

Answer 2

Yoy 必须在 'q.explorer' 状态的嵌套视图模板入口点的某处添加 'q.explorer.detail'，否则将不会调用子控制器。

例如：

template: '<page-explorer-v2></page-explorer-v2><ui-view></ui-view>',

而不是

template: '<page-explorer-v2></page-explorer-v2>'

参见 jsfiddle：http://jsfiddle.net/jcpmsuxj/42/

更新。正如@ajaegle 提到的，您应该访问官方文档页面： https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

angular 路由器没有 select 子状态（嵌套状态）

angular router does not select child state (nested states)

javascript

parent-child

angularjs

angular-ui-router