没有嵌套视图的嵌套 ui-router 状态? [英] Nested ui-router state without nested view?

问题描述

我想知道是否有可能没有嵌套视图的嵌套状态.假设我有这个设置:

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");

});

当我访问 /about 时，我会看到关于页面.当我访问 /about/us 时，我仍然得到 about 页面，在 about 页面的 ui-view 中加载了 us 页面.但是，我想要做的是加载 /about 上的 about 页面和 /us 上的 us 页面.这可能吗?

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?

推荐答案

是的，这是可能的.我们必须使用的是绝对命名.状态定义如下所示:

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'
    }
})

见文档:

在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.

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.

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

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

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

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

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:

    views : {
      "@" : {

注意:在幕后，UI-Router 将其用于状态 us:

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

    views : {
      "@about" : {

有一个工作plunker，这些状态在起作用:

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',
      },
    }
  })

在 action 中检查，如果us"是州名，则 ui-sref=我们"将正确导航到 '/about/us'.

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

这篇关于没有嵌套视图的嵌套 ui-router 状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！