单个页面上有多个视图的多个状态

我在使用多个视图的单个页面上定位嵌套视图时遇到了一些麻烦。这是我的代码。单个页面上有多个视图的多个状态

$stateProvider 
    .state('root', { 
     abstract: true, 
     url: '/', 
     views: { 

      'viewA': { 
       templateUrl: '/views/viewA.html' 
      }, 

      'viewB': { 
       templateUrl: '/views/viewB.html' 
      } 
     } 
    }) 
    .state('root.sectionA1', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewA.Section1.html' 
      } 
     } 
    }) 
    .state('root.sectionA2', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewA.Section2.html' 
      } 
     } 
    }) 
    .state('root.sectionB1', { 
     url: '', 
     views: { 
      'viewBSub': { 
       templateUrl: '/views/viewB.Section1.html' 
      } 
     } 
    }) 
    .state('root.sectionB2', { 
     url: '', 
     views: { 
      'viewASub': { 
       templateUrl: '/views/viewB.Section2.html' 
      } 
     } 
    })

我的index.html

<body> 
    <div ui-view="viewA"></div> 
    <div ui-view="viewB"></div> 
</body>

HTML以我的2个部分

<!-- viewA.html --> 
view A content 
<div ui-view="viewASub"></div> 


<!-- viewB.html --> 
view B content 
<div ui-view="viewBSub"></div>

此时所有viewA子视图状态显示了罚款。我可以添加多个部分，并使用ui-sref链接显示不同的状态。但是我无法看到任何'viewB'子视图。当我将'root.sectionB1'放在'root.sectionA1'上面时，第二部分子视图显示正常。我假设我需要更具体地介绍如何引用每个子视图的父级。我在这里错过了什么？

来源

2015-06-18 Sat

你有一个复制/粘贴错误root.sectionB2视图应该viewBSub然后我认为它的工作正常。

请看看下面的演示或在这fiddle。

angular.module('demoApp', ['ui.router']) 
 
.config(function($urlRouterProvider, $stateProvider) { 
 
    $urlRouterProvider.otherwise('/'); 
 
    $stateProvider 
 
    .state('root', { 
 
     abstract: true, 
 
     url: '/', 
 
     views: { 
 

 
      'viewA': { 
 
       templateUrl: 'views/viewA.html' 
 
      }, 
 

 
      'viewB': { 
 
       templateUrl: 'views/viewB.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionA1', { 
 
     url: '', 
 
     views: { 
 
      'viewASub': { 
 
       templateUrl: '/views/viewA.Section1.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionA2', { 
 
     url: '', 
 
     views: { 
 
      'viewASub': { 
 
       templateUrl: '/views/viewA.Section2.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionB1', { 
 
     url: '', 
 
     views: { 
 
      'viewBSub': { 
 
       templateUrl: '/views/viewB.Section1.html' 
 
      } 
 
     } 
 
    }) 
 
    .state('root.sectionB2', { 
 
     url: '', 
 
     views: { 
 
      'viewBSub': { //copy/paste mistake 
 
       templateUrl: '/views/viewB.Section2.html' 
 
      } 
 
     } 
 
    }) 
 
});

[ui-view="viewASub"] { 
 
    color: blue; 
 
    /*border:1px solid #000;*/ 
 
} 
 

 
[ui-view="viewBSub"] { 
 
    color: red; 
 
    /*border:1px solid #000;*/ 
 
}

<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.15/angular-ui-router.js"></script> 
 

 
<div ng-app="demoApp"> 
 
<script type="text/ng-template" id="views/viewA.html"> 
 
    <!-- viewA.html --> 
 
view A content 
 
<div ui-view="viewASub"></div> 
 
</script> 
 
    <script type="text/ng-template" id="/views/viewA.Section1.html"> 
 
view A section 1 
 
</script> 
 
    <script type="text/ng-template" id="/views/viewA.Section2.html"> 
 
view A section 2 
 
</script> 
 
<script type="text/ng-template" id="views/viewB.html"> 
 
<!-- viewB.html --> 
 
view B content 
 
<div ui-view="viewBSub"></div> 
 
</script> 
 
<script type="text/ng-template" id="/views/viewB.Section1.html"> 
 
view B section 1 
 
</script> 
 
<script type="text/ng-template" id="/views/viewB.Section2.html"> 
 
view B section 2 
 
</script> 
 
<div ui-view="viewA"></div> 
 
<div ui-view="viewB"></div> 
 
    <a ui-sref="root.sectionA1">sectionA1</a> 
 
    <a ui-sref="root.sectionA2">sectionA2</a> 
 
    <a ui-sref="root.sectionB1">sectionB1</a> 
 
    <a ui-sref="root.sectionB2">sectionB2</a> 
 
</div>

来源

2015-06-18 19:22:20 AWolf

感谢您的答复。我意识到我的原始问题并不够具体，我正在寻求在单个页面上实现并行状态。它看起来像唯一可用的解决方案是使用ui-router-extras，它允许粘性状态。 – Sat

单个页面上有多个视图的多个状态

回答

相关问题