javascript - 没有嵌套 View 的嵌套ui路由器状态？

我想知道是否有没有嵌套 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时，我仍然获得关于页面，并且我们页面已加载到关于页面的ui-view中。但是，我想做的是在/about上加载about页面，而在/us上仅加载us页面。这可能吗？

最佳答案

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

.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

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

因此，如文档所示，我们可以使用绝对命名。在我们的例子中，我们将目标定位为根状态，即名称为空字符串(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'。

关于javascript - 没有嵌套 View 的嵌套ui路由器状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26716483/