在Angularjs中使用ui-router如何在不重新加载控制器的情况下更改哈希，但保持子视图路由已启用

Question

简而言之：我的demo，如何拥有子视图？ （没有重新加载页面）

长：

我使用snapscroll提供不同的屏幕效果（demo）。该指令默认不支持ui-router，所以我必须自己做。

当您移动鼠标滚轮beforeSnap时，会触发事件事件。我调用ui-router $state.go来更改URL哈希。我没有重新加载控制器。

$scope.beforeSnap = function (snapIndex) {
    $state.go('view' + snapIndex,{},{
        notify:false,
        reload:false, 
        location:'replace', 
        inherit:true
    });
};

路由就像

.state('main', {
    url: '/',
    templateUrl: 'views/screens.html',
    controller: 'mainCtrl'
})
.state('view0', {
    url: '/green',
    templateUrl: 'views/screens.html',
    controller: 'mainCtrl',
    params: {'color': 'green', 'screenIndex': 0}
})
[...]

视图/ screens.html：

<div fit-window-height="" snapscroll="" snap-index="snapIndex" before-snap="beforeSnap(snapIndex)">
    <div class="green"></div>
    <div class="blue">
        <!-- How to enable these subviews? -->
        <!-- <a ui-sref="view0.a">Go to view0.a</a> -->
        <!-- <a ui-sref="view0.b">Go to view0.b</a> -->
        <div ui-view="view1"></div>
    </div>
    <div class="red"></div>
    <div class="yellow">
        <div ui-view="view3"></div>
    </div>
</div>

您可以看到codepen和demo。

问题是我希望在某些＆＃34;屏幕＆＃34; （颜色div），例如：view1和view3。 但是我不知道怎么做而不重新加载整个页面。子视图如：

• /厂景/ A
• /厂景/ B
• / VIEW3 / A
• / VIEW3 / B
• / VIEW3 / C

此外，我认为屏幕会比主要的main.view0，main.view1等的孩子更好/更清洁。

我读了multiple named views in ui-router和nested states但没有成功。