javascript - angularjs - ui-router 多个嵌套 View

Question

试图找出多个嵌套 View 的概念，但似乎不明白我做错了什么。

app.js 路由配置:

.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
    'ngInject';

    $stateProvider.state('home', {
         url: '/',
         templateUrl: 'tpls/views/welcome.html'
    })
    .state('feeds', {
        url: '/feeds',
        views: {
            'main': {
                templateUrl: 'tpls/views/main.html'
            },
            'siderbar@feeds' : {
                templateUrl: 'tpls/views/sidebar.html',
                controller: 'MyCtrl',
                controllerAs : 'main'
            },
            'mainfeed@feeds': {
                templateUrl: 'tpls/views/mainfeed.html',
                controller: 'MyCtrl',
                controllerAs : 'main'
            }
        }
    });
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
});

HTML:

上

index.html

I have an an empty directive <div ui-view></div>

and this is main.html :

<div class="row">
    <div class="col-md-4 no-float sidebar">
        <div ui-view="sidebar"></div>   
    </div>
    <div class="col-md-8 no-float">
        <div ui-view="mainfeed"></div>
    </div>
</div>

我的观点没有呈现。在 /feeds 中时，我只看到背景。你能帮我发现问题吗？翻了github文档，还是无法推断出解决方案。谢谢!

Answer 1

确保基页index.html应该命名 View main .

<div ui-view="main"></div>

---

如果main那么命名 View 不存在，你可以有''在你的基地view的 feeds如下所示。

代码

.state('feeds', {
    url: '/feeds',
    views: {
        //used blank to target unnamed `ui-view` placed on html
        '': {
            templateUrl: 'tpls/views/main.html'
        },
        'siderbar@feeds' : {
            templateUrl: 'tpls/views/sidebar.html',
            controller: 'MyCtrl',
            controllerAs : 'main'
        },
        'mainfeed@feeds': {
            templateUrl: 'tpls/views/mainfeed.html',
            controller: 'MyCtrl',
            controllerAs : 'main'
        }
    }
});