没有嵌套视图的嵌套ui-router状态？

Question

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

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页面中加载了包含us页面ui-view的页面.但是,我想要做的是加载about页面,/about然后只打开us页面/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'
    }
})

见文档:

查看名称 - 相对名称与绝对名称

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

例如,前面的示例也可以写成:

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

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

    views : {
      "@" : {

注意:在幕后,UI-Router用于状态us:

    views : {
      "@about" : {

有一个工作的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',
      },
    }
  })

检查它在行动,如果"我们"是一个国家的名字与UI SREF ="US"将正确定位到'/about/us'.