Question

我在一个页面上有多个视图，在一个视图中我有嵌套视图。如何在app.js中配置它。下面是我的代码，它不起作用。
这是我的index.html文件

<body ng-app="configuratorApp" >
    <div ui-view="view1"></div>
    <div  ui-view="view2"></div>
</body>

这是我的view1.html文件

<div ui-view> </div>
<button  type="button" ui-sref="view1.child1"></button>
<button  type="button" ui-sref="view1.child2"></button>

这是我的view1-child1.html文件

<h1>Child1<h1>

这是我的view1-child2.html文件

<h1>Child2<h1>

这是我的view2.html文件

<h1>Hello World</h1>

这是我的app.js文件

.state('home',{
    url: '/',
    views: {
        '': {
            templateUrl: 'index.html'
        },
        'view1@home': {
            templateUrl: 'view1.html' 
        },'view2@home': {
            templateUrl: 'view2.html' 
        }
      }
})
.state('view1.child1', {
        url: '/child1',
        templateUrl: 'view1-child1.html'
    })
.state('view1.child2', {
        url: '/child2',
        templateUrl: 'view1-child2.html'
    })

Answer 1

你把观点与各州搞混了。

没有view1.child1状态，原因是您没有view1作为父状态（除非您上面发布的代码不完整）。该名称应为home.child。

.state('home.child1', { //this should be home.child1 instead of view1.child1
  url: '/child1',
  templateUrl: 'view1-child1.html'
})
.state('home.child2', {
  url: '/child2',
  templateUrl: 'view1-child2.html'
})

另请注意，您需要在index.html中使用根模板（或未命名的根模板），否则无法填充home州。

所以在你的index.html中，你需要这个：

<body ng-app="configuratorApp">
   <div ui-view></div> <!--this is the root template, to let Home state 'live' here-->
</body>

这是工作plnkr

P.S。如果plnkr不工作只需刷新它。有时它在获取htmls

时遇到问题

使用ui router angularjs在多个视图中嵌套视图

1 个答案: