使用 UI-Router - 是否可以使用常规语法仅设置单个 ui-view? [英] Using UI-Router - Is it possible to set only single ui-view using regular syntax?

问题描述

在我的一个模板中，我有这个代码:

In one of my templates , I have this code :

<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<a ui-sref=".thing">thing7</a>

<div ui-view="left"></div>
<div ui-view="right"></div>

当我单击 .list 状态时 - 我确实有一个具有适当配置的控制器:

When I click the .list state - I do have a controller with the appropriate configuration :

....state('route1.list',
{
    url: '/list',
    views:
    {

        'left@route1':
        {
            templateUrl: 'route1.list.html',
            controllerAs: "vm",
            controller: function ($scope)
            {
                this.items = ["a", "b", "c", "d"];
            }
        },
        'right@route1':
        {
            templateUrl: 'route1.list.html',
            controllerAs: "vm",
            controller: function ($scope)
            {
                this.items = ["1", "2", "3", "4"];
            }
        }
    }

})

这工作正常，我确实看到两个视图都填充了适当的数据.

This is working fine and I do see both views getting filled with appropriate data.

现在 - 当我点击 .thing 状态时 - 我只想要这个视图:

Now - when I click on the .thing state - I want only this view :

<div ui-view="right"></div>

加载数据.

很明显我应该使用这个代码:

So obviously I should use this code :

.state('route1.thing',
{
    url: "/thing",
    views:
    {
        'right@route1':
        {
            templateUrl: 'route3.html',
            controllerAs: "vm",
            controller: function($scope)
            {
                this.thing = "I'm aaa";
            }
        }
    }
})

问题

当我在页面上有多个视图，而我只想触摸一个视图(而不是其他视图)时——我还必须使用这种结构吗:

When I have multiple view on the page , and I only want to touch a single view (not the others) — Must I still using this structure :

 .state('route1.thing',
    {
        url: "/thing",
        views:
        {
             ...
        }

我的意思是 - 是否有任何东西可以让我将信息应用到特定视图中，例如常规格式:

I mean - Is there anything which allows me to apply the info into a specific view like in the regular format:

.state('route1.thing', {
              url: "/thing",
              templateUrl: "route3.html",
              applyTo:"right@route1" , // <-- Something like this
              controller: function($scope){
               ....
              }
          })

推荐答案

在这种情况下，我们可以用 UI-Router 做的是文件嵌套...

What we can do with UI-Router in this case, is file nesting...

基于 由 Royi Namir 创建的 plunker，我做了一些调整，有一个更新和工作的plunker

Based on the plunker created by Royi Namir, I made few adjustment and there is an updated and working plunker

所以，我们有父状态'route1.list':

So, we have parent state 'route1.list':

.state('route1.list',
{
    url: '/list',
    views:
    {    
        'left@route1':
        {
            ...
        },
        'right@route1':
        {
            ...
        }
    }    
})

我们只想改变左或右部分.如前所述，我们可以通过状态嵌套来做到这一点 - 但是将上述状态 'route1.list' (不在祖父 ' 下)嵌套route1')

And we want to change just left or right part. As already said, we can do that with state nesting - but nesting anther the above state 'route1.list' (not under the grand parent 'route1')

.state('route1.list.thing', {
    url: '/thing',
    views: {

      'right@route1': {
        ...
      }
    }
  })
  .state('route1.list.left', {
    url: '/left',
    views: {

      'left@route1': {
        ...
      }
    }
  })

这些链接会按预期改变内容:

And these links will change stuff as expected:

<a ui-sref=".list">
<a ui-sref=".list.left">this will change the left</a>
<a ui-sref=".list.thing">this will change the right</a>

在此处查看

这篇关于使用 UI-Router - 是否可以使用常规语法仅设置单个 ui-view?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！