嵌套状态的多个视图

Multiple views to nested state

本文关键字：视图 状态 嵌套      更新时间：2024-04-29

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

我已经多次阅读了多个命名视图的 wiki 页面，但尚未获得任何工作。我的状态模板会显示，但我的观点永远不会显示。

这是一个工作弹道机(您必须单击导航栏中的"关注者"才能显示视图。还不知道为什么(。

重要的部分是配置

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 视图(

<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 视图，因为它可能包含我的仪表板或其他内容。
  • 第 3 级包含特定的视图，因为我想使用"视图"而不是"状态"(至少据我所知(。

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

我已经在SO上看到了几个类似的问题，例如这个或另一个，但到目前为止，我的尝试还没有取得成果。

  • 如果我到达它的 URL，我可以直接访问我的"添加"视图(当我尝试设置一个时(
  • 但是，仪表板.关注者状态不会由视图填充。

我认为您犯了几个错误：

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

/* 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");
  });
<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>

更新

我做了两个 plunker 以适应两种不同的情况：

  1. 如果要动态加载add状态ui-view="add"以由链接，检查这个出来了。

  2. 如果您只想始终以dashboard.followers状态加载子模板，只需删除add状态，然后使用views: {...}加载add模板。

相关文章：