如何在路由器的视图中实现视图

时间：2021-11-09 11:39:32

With UI-Router, I can have multi ui-view in one router, but how about if I want to have multi ui-view inside in one of ui-view? Take a look of my example:

使用UI-Router,我可以在一个路由器中使用多ui-view,但是如果我想在ui-view中使用多ui-view呢?看看我的例子:

<html>
<body ng-app='app'>
<div ui-view='orders'></div>
<div ui-view='contacts'></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script type="text/javascript">
    angular.module('app', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider.state('customer', {
            url: '/',
            views: {
                'orders': {
                    template:'<div>orders</div> <div ui-view="purchaseOrder"></div> <div ui-view="addresses"></div>',
                    views: {
                        'purchaseOrder': {template: '<span>purchaseOrder</span>'},
                        'addresses': {template: '<span>addresses</span>'}
                    }
                },
                'contacts': {
                    template: '<div> contacts</div>'
                }
            }
        })
    });

</script>
</body>
</html>

I really it can work the above way, but the views nested in view never shown on page. Anyone has a idea to do views in view?

我真的可以按上述方式工作,但嵌套在视图中的视图从未显示在页面上。任何人都有想法在视野中做观点?

1 个解决方案

#1

1  

In general this concept of state definition:

一般来说,这个状态定义的概念:

...
views:
{
  views : { ... }
}

is not supported. But we can think about it as just syntax issue. Because we can change that into

不受支持。但我们可以将其视为语法问题。因为我们可以改变它

// state 'index'
...
views:
{
  '': { ... place holder for other views ...}
  'targetA@index' : { ... injects into above view ... }
  'targetB@index' : { ... injects into above view ... }
}

I would suggest to check this Q & A (there is a working example):

我建议查看这个Q&A(有一个工作示例):

Angular UI Router - Nested States with multiple layouts

The point is to introduce one special view, with the over all layout. That layout.html content could be:

重点是介绍一个特殊的视图,覆盖所有布局。 layout.html内容可以是:

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

Now, we would have this view as a main view in our state, and the others will be injected into that layout.html:

现在,我们将此视图作为我们州的主视图,其他视图将被注入到layout.html中:

.state('index', {
    url: '/',
    views: {
      // this goes into index.html ui-view
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      // these are injected into layout.html
      // check the absolute naming 'top@index'
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

Read more about absolute naming here:

阅读更多关于绝对命名的信息:

#1

1  

In general this concept of state definition:

一般来说,这个状态定义的概念:

...
views:
{
  views : { ... }
}

is not supported. But we can think about it as just syntax issue. Because we can change that into

不受支持。但我们可以将其视为语法问题。因为我们可以改变它

// state 'index'
...
views:
{
  '': { ... place holder for other views ...}
  'targetA@index' : { ... injects into above view ... }
  'targetB@index' : { ... injects into above view ... }
}

I would suggest to check this Q & A (there is a working example):

我建议查看这个Q&A(有一个工作示例):

Angular UI Router - Nested States with multiple layouts

The point is to introduce one special view, with the over all layout. That layout.html content could be:

重点是介绍一个特殊的视图,覆盖所有布局。 layout.html内容可以是:

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

Now, we would have this view as a main view in our state, and the others will be injected into that layout.html:

现在,我们将此视图作为我们州的主视图,其他视图将被注入到layout.html中:

.state('index', {
    url: '/',
    views: {
      // this goes into index.html ui-view
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      // these are injected into layout.html
      // check the absolute naming 'top@index'
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

Read more about absolute naming here:

阅读更多关于绝对命名的信息:

标签：

相关文章