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