angularjs-ui-router多个嵌套视图

Question

试图弄清楚多个嵌套视图的概念，并且似乎不明白我在做什么错。

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

HTMLS：

上

index.html

我有一个空指令<div ui-view></div>

这是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应该具有名为main视图。

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

---

如果main命名视图不存在，则可以在feeds的基本view '' ，如下所示。

码

.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'
        }
    }
});

Answer 2

这就是嵌套视图的语法。 请与您的语法交叉检查。
注意：这是第三方，因此我们使用了ui.router.stateHelper

angular.module('myApp', ['ui.router', 'ui.router.stateHelper'])
  .config(function(stateHelperProvider){
    stateHelperProvider.setNestedState({
      name: 'root',
      templateUrl: 'root.html',
      children: [
        {
          name: 'contacts',
          templateUrl: 'contacts.html',
          children: [
            {
              name: 'list',
              templateUrl: 'contacts.list.html'
            }
          ]
        },
        {
          name: 'products',
          templateUrl: 'products.html',
          children: [
            {
              name: 'list',
              templateUrl: 'products.list.html'
            }
          ]
        }
      ]
    });
  });

请访问此更多详细信息。https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views