0

我在定位具有多个视图的单个页面上的嵌套视图时遇到了一些问题。这是我的代码。

$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>

我的 2 个部分的 html

<!-- 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' 上方时，第二个部分子视图显示得很好。我假设我需要更具体地说明如何引用每个子视图的父级。我在这里错过了什么吗？

4

1 回答 1

0

root.sectionB2您应该在视图中出现复制/粘贴错误，viewBSub然后我认为它按预期工作。

请看下面的演示或这个小提琴。

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-18T19:22:20.773 回答