Question

所以我试图让子菜单改变子视图的状态，我失败了。

所以设置以下函数来调用$ state.go

$scope.stateGo = function (state) {
    console.log("Loadting state " + state)
    $state.go(state);
}

我可以在控制台上看到正确的（或者我认为正确的州名称）被称为

加载状态board.stat

然而，实际的路由器似乎什么也没发生。如果我将其更改为父状态。它确实有效。例如，如果我将其设置为登录，则可以正常工作。

包含ui-views的文件如下所示：

    <div ui-view="topmenu">
    </div>
</div>
<div id="mainView">

    <div ui-view="mainView">
    </div>
    <div style="height: 100px;"> </div>
</div>
<div class="col-md-offset-3 footer navbar-fixed-bottom" id="adView">
    <div ui-view="adView">
    </div>
</div>

状态配置：

    .state('board', {
        url: "/view/board",
        views: {
            topmenu: {templateUrl: "views/partials/menu-board"},
            mainView: {templateUrl: "views/partials/welcome"},
            adView: {templateUrl: "views/partials/amazon-banner"}
        },
        //controller: 'testCtrl'
    })
    .state('board.stat', {
        url: "/stat",
        views: {
            topmenu: {templateUrl: "views/partials/menu-board"},
            mainView: {templateUrl: "views/partials/stat"},
            adView: {templateUrl: "views/partials/amazon-banner"}
        }
    })

我错过了什么，如果调用$ state.go（'board.stat'）让ui-router将stat加载到mainView中？如果是这样，任何想法都不是吗？

=======================编辑=================== 好吧，想想我可能做错了，但不确定如何...... 更改按钮以使用ui-href

<a ui-sref="board.stat"  ui-sref-active="active" class="btn btn-xlarge" ><button class="btn btn-primary btn-circle btn-xl"><i class="fa fa-bar-chart fa-1x"></i><br><h6>Stats</h6></button></a>
<a ui-sref="board.quickbet"  ui-sref-active="active" class="btn btn-xlarge" ><button class="btn btn-primary btn-circle btn-xl"><i class="fa fa-plus fa-1x"></i><br><h6>Quick bet</h6></button></a>

与之前的布局相同，但似乎只有在我进入父状态时才加载两个子状态。

所以我使用以下两个函数为状态添加了一些调试：

$rootScope.$on('$stateChangeError',
    function(event, toState, toParams, fromState, fromParams, error){
        console.log("State error: " + error);
    })
$rootScope.$on('$viewContentLoading',
    function(event, viewConfig){
        // Access to all the view config properties.
        // and one special property 'targetView'
        // viewConfig.targetView
        console.log("State event: " + viewConfig)
    });

但我得到的唯一输出是：

2州事件：mainView @ 2州事件：adView @

但是当我按下按钮时似乎没有任何事情发生

Answer 1

认为我解决了它。好吧，我确实解决了它，但我很惊讶它是如何工作的。所以问题似乎是我认为孩子状态会重新加载ui-views的一组洞，但事实并非如此，并且试图这样做似乎什么都不做。我不知道这是正确的解释还是预期的行为，但这对我有用。

使用所有三个视图（名为topmenu，mainView和adView）加载父状态（自动发生）。添加一个新的ui-view（在我的情况下，在mainView上加载的stats.ejs中）

This is your stats and bets
<ui-view></ui-view>

最后一件事是只更新你想要的屏幕部分，所以不是mainView，而是在stats.ejs中定位新的ui-view

    .state('board.stat', {
        templateUrl: "views/partials/stat"
    })

它有效，但不确定这是否与DOM或其他东西有关，但它在我的情况下起作用

使用$ state.go调用ui-router子状态

1 个答案: