Question

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

$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链接添加多个部分并显示不同的状态。但是我无法获得任何观看视频。子视图如此显示。当我放置＆quot; root.sectionB1＆＃39;以上＆＃39; root.sectionA1＆＃39;第二部分的子视图显示正常。我假设我需要更具体地说明我如何引用每个子视图的父级。我在这里错过了什么？

Answer 1

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>

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

1 个答案: