Question

我在添加到我们网站的新状态出现问题。

简短说明 我有一个州（/page)'q.explorer'其中包含一个按钮;当点击它时，它应该进入子状态（名为＆＃39; q.explorer.detail＆＃39;）但它没有。但是：在日志记录中，我看到它确实尝试转到那个（/ state），并且新的url格式化为子状态中定义的格式。但实际使用的模板和控制器仍然是父母＆＃39;其中包含按钮......

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

设置如下：

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

＆＃34; q.explorer＆＃34;模板深处的某个地方有一个按钮可以打开详细视图（＆＃34; q.explorer.detail＆＃34;）。它使用此代码：

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

正如您所看到的，它使用了父母的控制器＆＃39; iso要打开的子页面。即使$ state.current.name是正确的......或者我应该说它不会改变状态......

欢迎任何帮助。

（PS：我们正在使用Angular 1.4.9）

Answer 1

您似乎正在使用嵌套状态，q.explorer.detail是q.explorer的子级。要呈现子状态模板，您还需要一个可放入其中的特定ui-view。这将在父状态的模板中搜索。获取console.log（）输出只是意味着控制器被实例化，但即使模板根本没有被渲染，也会发生这种情况。

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

你也可以通过不让q.explorer.detail成为q.explorer的孩子来解决这个问题。只要需要点符号，就会创建子状态。

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/

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

角度路由器不选择子状态（嵌套状态）

2 个答案: