本文介绍了没有嵌套视图的嵌套 ui-router 状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm wondering if it's possible to have a nested state without a nested view. Suppose I have this setup:

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 页面,在 about 页面的 ui-view 中加载了 us 页面.但是,我想要做的是加载 /about 上的 about 页面和 /us 上的 us 页面.这可能吗?

When I visit /about, I get the about page. When I visit /about/us, I still get the about page with the us page loaded in the ui-view of the about page. However, what I would like to do is load the about page on /about and just the us page on /us. Is this possible?

推荐答案

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

Yes it is possible. What we have to use, is the absolute naming. State defintion would look like this:

.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 是视图指令和状态名称中使用的名称是状态的绝对名称,例如联系方式.您还可以选择以绝对语法编写视图名称.

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

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

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

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

So as documentation shows, we can use absolute naming. In our case, we will target root state which nams is string empty (index.html) - the part after delimiter @. And it is unnamed view - string Empty before @. That is why we use:

    views : {
      "@" : {

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

NOTE: behind the scenes, UI-Router used this for state us:

    views : {
      "@about" : {

有一个工作plunker,这些状态在起作用:

There is a working plunker, with these states in action:

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

Check it in action that if the 'us' is a state name the ui-sref="us" will properly navigate to '/about/us'.

这篇关于没有嵌套视图的嵌套 ui-router 状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 00:33
查看更多