没有嵌套视图的嵌套ui-路由器状态?

I'm wondering if it's possible to have a nested state without a nested view. Suppose I have this setup:

我想知道不使用嵌套视图是否可能有嵌套状态。假设我有这样的设置:

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
       templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        parent: 'about',
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");

});

When I visit /about, I get the about page. When I visit /about/us, I still get the about page with the us page loaded in the ui-view of the about page. However, what I would like to do is load the about page on /about and just the us page on /us. Is this possible?

当我访问时，我得到了有关页面。当我访问/about/us时，仍然可以在about页面的ui-view中找到包含us页面的about页面。但是，我想做的是加载about页面和us上的us页面。这是可能的吗?

2 个解决方案

#1

Yes it is possible. What we have to use, is the absolute naming. State defintion would look like this:

是的,这是可能的。我们要用的是绝对命名。国家定义是这样的:

.state('us', {
    url: "/us",
    views : {
      "@" : { // here we are using absolute name targeting
        templateUrl: "views/us.html",
        controller: "UsController", 
      },
    }
    parent: 'about',
    ncyBreadcrumb: {
        label: 'Us'
    }
})

See doc:

看到医生:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

在幕后，每个视图都被赋予一个绝对名称，该名称遵循viewname@statename方案，其中viewname是视图指令中使用的名称，而statename是状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名。

For example, the previous example could also be written as:

例如，前面的例子也可以写成:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

So as documentation shows, we can use absolute naming. In our case, we will target root state which nams is string empty (index.html) - the part after delimiter @. And it is unnamed view - string Empty before @. That is why we use:

正如文档所示，我们可以使用绝对命名。在我们的示例中，我们将针对根状态，即nams是string empty (index.html)——分隔符@之后的部分。它是未命名的视图-字符串在@之前为空。这就是为什么我们使用:

    views : {
      "@" : {

NOTE: behind the scenes, UI-Router used this for state us:

注意:UI-Router把它用于描述我们:

    views : {
      "@about" : {

There is a working plunker, with these states in action:

有一个工作柱塞，这些状态起作用:

// States
$stateProvider

  .state('index', {
    url: "/index",
    templateUrl: 'tpl.html',
  })
  .state('about', {
    url: "/about",
    templateUrl: 'tpl.html',
  })
  .state('us', {
    url: "/us",
    parent: "about",
    views : {
      '@': {
        templateUrl: 'tpl.html',
      },
    }
  })

Check it in action that if the 'us' is a state name the ui-sref="us" will properly navigate to '/about/us'.

如果“us”是一个州名，ui-sref=“us”将正确导航到“/about/us”。

#2

Sure, just because a state shares part of the url doesn't mean it has to be a parent/child relationship. Just set the us state's url to /about/us and don't give it a parent.

当然，仅仅因为一个州共享部分url并不意味着它必须是父/子关系。只需将美国的url设置为/about/us，不要给它一个父结点。

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
        templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/about/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");
});