javascript - Angular 路由器不选择子状态(嵌套状态)

Question

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

简短描述我有一个状态(/page)“q.explorer”，其中包含一个按钮；单击时，它应该进入子状态(名为“q.explorer.detail”)，但事实并非如此。但是:在日志记录中，我看到它确实尝试访问该状态(/state)，并且新的 url 的格式按照子状态中的定义进行。但实际使用的模板和 Controller 仍然是包含按钮的“父级”...

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

设置如下:

$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”模板深处的某个地方有一个用于打开详细信息 View 的按钮(“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 的 Controller 来打开我想要打开的子页面。即使 $state.current.name 是正确的......或者也许我应该说它不会从状态改变......

欢迎任何帮助。

(PS:我们使用的是 Angular 1.4.9)

Answer 1

看起来您正在使用嵌套状态，使得 q.explorer.detail 是 q.explorer 的子级。要渲染子状态的模板，您还需要一个可以放置它的特定 ui-view 。这将在父状态的模板中搜索。获取 console.log() 输出仅意味着 Controller 已实例化，但即使模板根本未呈现，也会发生这种情况。

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

您还可以通过不使 q.explorer.detail 成为 q.explorer 的子级来解决此问题。当您需要点符号时，就会创建子状态。