javascript – 嵌套ui路由器状态没有嵌套视图？

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

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

});

当我访问/约,我得到关于页面.当我访问/关于/我们,我仍然得到关于页面,我们的页面加载在关于页面的ui视图中.但是,我想做的是将/页面上的about页面加载到/ us.这可能吗？

解决方法

是的,这是可能的.我们必须使用的是绝对命名.国家定义将如下所示：

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

见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.

For example,the prevIoUs example Could also be written as:

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

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

views : {
      "@" : {

注意：幕后,UI-Router使用这个来表示我们：

views : {
      "@about" : {

有一个working plunker,这些州在行动：

// States
$stateProvider

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

在action检查,如果’us’是一个状态名称,ui-sref =“us”将正确导航到“/ about / us”.