javascript - 没有嵌套 View 的嵌套 ui-router 状态？

Question

我想知道是否可以在没有嵌套 View 的情况下使用嵌套状态。假设我有这个设置:

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 时，我仍然会看到关于页面，其中 us 页面已加载到关于页面的 ui-view 中。但是，我想做的是在 /about 上加载关于页面，在 /us 上加载我们页面。这可能吗？

Answer 1

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

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

查看文档:

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.

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

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

因此，如文档所示，我们可以使用绝对命名。在我们的例子中，我们将以根状态为目标，其中 names 是空字符串 (index.html) - 分隔符 @ 之后的部分。它是未命名的 View - @ 之前的字符串为空。这就是我们使用的原因:

    views : {
      "@" : {

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

    views : {
      "@about" : {

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

// 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="us"将正确导航到 '/about/us'。