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页面的ui-view中加载包含us页面的about页面。但是，我想要做的是在/about和/us上的美国页面加载about页面。这可能吗？

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

见doc：

View Names - Relative vs. Absolute Names

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

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

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

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

    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中查看如果“我们”是州名，则ui-sref =“我们”将正确导航至'/about/us'。

Answer 2

当然，仅仅因为一个国家分享网址的一部分并不意味着它必须是父/子关系。只需将us州的网址设为/about/us，不要将其设为父级。

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: "/about/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");
});

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

2 个答案:

View Names - Relative vs. Absolute Names