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：

on

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已命名的视图不存在，那么'' view feeds的{{1}}如下所示。

<强>代码

.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

angularjs - ui-router多个嵌套视图

2 个答案: