更新

Question

我正在使用ui-router，我尝试在我的一个嵌套状态中创建几个视图。在我的逻辑中，只要父状态处于活动状态，所有视图都应该是可见的。

我已多次阅读multiple named views上的维基页面，但无法正常工作。我的州模板会出现，但我的观点永远不会。

Here is a working plunker （您必须单击导航栏中的“关注者”才能显示视图。还没有想出原因）。

重要的部分是配置

app.config([
    '$stateProvider', 
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider){
        $stateProvider
        .state('dashboard', {
            url: '/dashboard', 
            templateUrl: 'dashboard.html',
            controller: 'DashboardCtrl',
            authenticate: true
        }).state('dashboard.followers', {
            url: '/followers', 
            templateUrl: 'dashboard.followers.html',
            controller: 'DFollowersCtrl',                
            authenticate: true 
        }).state('dashboard.followers.add', {
            views: {
                'add': {
                    templateUrl: 'dashboard.followers.add.html',
                    controller: 'DFollowersAddCtrl',
                    authenticate: true
                }
            },
        });

        $urlRouterProvider.otherwise('dashboard');
    }
]);

主仪表板模板（级别2，使用通用ui-view）

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="flash-area">
        <flash-message duration="2000" show-close="true"></flash-message>
    </div>
    <ui-view></ui-view>
</div>

和dashobard.followers特定级别3视图，具有特定名称

<div>

    <h1 class="page-header">Followers</h1>

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

</div>

我认为诀窍来自：

我想使用3级嵌套
第2级使用通用的ui-view，因为它可能包含我的仪表板或其他内容。
第3级包含特定的视图，因为它是我想要使用“视图”而不是“状态”的地方（据我所知，至少）。

最终目标是在我的模板中有多个视图，但是现在我减少了仅显示“添加”视图的尝试。

我已经在SO上看过几个类似的问题，例如this one或this other one，但到目前为止，我的尝试并没有取得多少成果。

如果我到达其网址（当我尝试设置一个网址时），我可以直接访问我的“添加”视图
但是，dashboard.followers状态不会被视图填充。

Answer 1

我认为你在这里犯了几个错误：

如果您希望dashboard.followers州和dashboard.followers.add州的网址相同，则子状态dashboard.followers.add不需要url选项
可能是一个错误（我不确定，因为没有提供代码），如果你不使用 views: { ... } 命名视图，但只是直接使用url: '/followers', templateUrl: '/partials/dashboard.followers.html' angular只是假设您希望将模板插入父状态模板中未命名的<div ui-view></div>而不是根模板。例如，在我的示例代码中，对于状态dashboard.followers，因为它是dashboard的子状态，如果我想在root html模板中插入模板，我必须使用 views: { '@': { template: '<div><h1 class="page-header">Followers</h1><a ui-sref="dashboard.followers.add">add</a><div ui-view="add"></div></div>' } }

＆＃13;

/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', function($stateProvider) {

    $stateProvider
      .state('landing', {
        url: '/',
        template: '<p>landing</p><a ui-sref="dashboard">dashboard</a>'
      })
      .state('dashboard', {
        url: '/dashboard',
        template: '<p>landing</p><a ui-sref="dashboard.followers">followers</a>'
      })
      .state('dashboard.followers', {
        url: '/followers',
        views: {
          '@': {
            template: '<div><h1 class="page-header">Followers</h1><a ui-sref="dashboard.followers.add">add</a><div ui-view="add"></div></div>'
          }
        }
      })
      .state('dashboard.followers.add', {
        views: {
          'add': {
            template: '<p>followers</p>'
          }
        }
      });
  }])
  .controller('MyAppCtrl', function($scope, $state /*, $stateParams*/ ) {
    $state.go("landing");
  });

＆＃13;

<body ng-app="myApp" ng-controller="MyAppCtrl">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
  

  <div ui-view></div>

</body>

＆＃13;

更新

我做了两个掠夺者以适应两种不同的情况：

如果您想通过a将add状态动态加载到ui-view="add" 链接，检查 this出来。
如果您只想在dashboard.followers州上加载子模板，只需删除add州，然后使用views: {...}加载add模板in。这是plunker。

嵌套状态

1 个答案:

更新