Question

我正在为我的应用程序使用UI路由器。他们的FAQ page涵盖了默认的子状态问题，但他们没有使用命名视图，我无法弄清楚如何使其工作。

以下是我的代码示例：

的index.html

<a ui-sref="/">Home</a>
<a ui-sref="topic.basics">Basics</a>
<a ui-sref="topic.payments">Payments</a>

<div ui-view="container" class="container"></div>

app.js

$stateProvider
  .state("/", {
    url: "/"
  })
  .state("topic", {
    url: "/topic/",
    abstract: true,
    // ?
  })
  .state("topic.basics", {
    url: "basics/",
    views: {
      "container": {
        templateUrl: "views/basics.html" 
      }
    }
  })
  .state("topic.payments", {
    url: "payments/",
    views: {
      "container": {
        templateUrl: "views/payments.html" 
      }
    }
  });

$urlRouterProvider
  .when("/topic/", "/topic/basics/")
  .otherwise("/");

Answer 1

你几乎就在那里，但由于视图目标不是父目录，而是index.html，我们必须使用aboslute命名

  .state("topic.basics", {
    url: "basics/",
    views: {
      // instead of this, which targets the parent
      // "container": {
      // we need this, where string empty after @ means root/index.html
      "container@": {
        templateUrl: "views/basics.html" 
      }
    }
  })
  .state("topic.payments", {
    url: "payments/",
    views: {
      // "container": {
      "container@": {
        templateUrl: "views/payments.html" 
      }

见

View Names - Relative vs. Absolute Names

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

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

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

Answer 2

使基本主页状态为abstract，并删除已在基本路径中使用此主题的/前面的/。

$stateProvider
  .state("home", {
    name: 'home',
    abstract: true,
    url: "/"
  })
  .state("topic", {
    name: 'home.topic',
    url: "topic/"
  })
  .state("topic.basics", {
    url: "basics/",
    name: 'home.topic.basics'
    views: {
      "container": {
        templateUrl: "views/basics.html" 
      }
    }
  })
  .state("topic.payments", {
    url: "payments/",
    name: 'home.topic.payments',
    views: {
      "container": {
        templateUrl: "views/payments.html" 
      }
    }
  });

$urlRouterProvider.otherwise("/");

AngularJS。具有命名视图的默认子状态

2 个答案:

View Names - Relative vs. Absolute Names