單個頁面上有多個視圖的多個狀態

我在使用多個視圖的單個頁面上定位嵌套視圖時遇到了一些麻煩。這是我的代碼。單個頁面上有多個視圖的多個狀態

$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

單個頁面上有多個視圖的多個狀態

回答

相關問題