Question

我有一个嵌套视图的Angular应用程序，如下所示：

...<body ng-app="blocksApp">

<div ui-view="full">

    <div ui-view="viewMainMenu"></div>
    <div ui-view="viewHeaderBar"></div>
    <div ui-view="viewMainContent"></div>

</div>

</body>...

无论我对我的ui-router路由做什么，我都会得到＆＃34;无法读取属性＆＃39; name＆＃39;未定义＆＃34;三次，每次我的子视图一次＆＃39;如果我删除了父母＆＃39; ui-view引用然后一切都开始工作，但改变了＃34; full＆＃34;到＆＃34;＆＃34;没有效果。我以为你可以嵌套ui-views？

我的路由如下：

angular.module('blocksApp')
.config(function ($stateProvider, $urlRouterProvider) {

     //For any unmatched url, redirect to this state:
    $urlRouterProvider.otherwise("/default",{
        views:{
            "viewMainMenu":{template:"Purple Main Menu"},
            "viewHeaderBar":{template:"Purple Header Bar"},
            "viewMainContent":{template:"Purple main content"}
        }

    });
    //
    // Now set up the states...

控制台错误如下所示：

angular.js:13550 TypeError: Cannot read property 'name' of undefined
    at getUiViewName (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4117:86)
    at updateView (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4002:33)
    at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3975:9
    at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9694:9)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9093:11)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8397:13)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9088:24)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8397:13)
    at publicLinkFn (http://localhost:3000/bower_components/angular/angular.js:8277:30)
    at lazyCompilation (http://localhost:3000/bower_components/angular/angular.js:8615:25) <!-- uiView: viewMainMenu -->

我可以用这种方式嵌套简单的ui-views吗？如果是这样，我的路由应该如何支持它？

Answer 1

我认为这是因为你没有给你的州一个名字

首先尝试定义状态：

    $stateProvider.state('default', {
        url: '/default',
        views: {
            'view1':{
                template: '<template1>',
            },
            'view2':{
                template: '<template>',
            },
            'view3':{
                template: '<template3>',
            }
        }
    });

然后设置否则 $ urlRouterProvider.otherwise（＆＃34; /默认＆＃34）;

Answer 2

嵌套的ui-view无法按照您的想法运作。

otherwise只会有一个网址，例如

.otherwise("/")

将重定向到主页面。

嵌套视图位于父模板中，如下所示：

parent.html

<h3>I'm parent</h3>
<p>I'm a paragraph.</p>
<div ui-view="childView1"></div> <!-- in your case - viewMainMenu -->
<div ui-view="childView2"></div> <!-- in your case - viewHeaderBar -->
<div ui-view="childView3"></div> <!-- in your case - viewMainContent -->

<p>I'm another paragraph.</p>

视图仅在状态中定义：

routing.js

$stateProvider
     .state('parent', {
         views: {
             'childView1': {template: '<p>A template</p>' }
             'childView2': {template: '<p>A template</p>' }
             'childView3': {template: '<p>A template</p>' }
         }
     }

如何在Angular + ui-router中定义简单的嵌套视图

2 个答案: