ui-没有嵌套视图的路由子状态

Question

正如您在以下代码中注意到的那样，我想查看父 "colors" 状态（它将显示 table 和颜色列表），然后显示每种颜色应该有自己的观点，而不是继承自 "colors".

因此层次结构应仅适用于 URL，不适用于视图。

有什么想法吗？

.state('colors', {
        url: "/colors",
        templateUrl: 'views/colors/colors.html'
      })
.state('colors.yellow', {
        url: "/yellow",
        templateUrl: 'views/colors/yellow.html'
      })

Answer 1

我知道你已经找到了答案。但是让我附加其他方法并用一些更动态的东西扩展您的解决方案。它会稍微解决您的问题，但可以帮助您了解 UI-Router

周围的魔力

我创造了an example here

首先，我们可以有这样的父模板(colors.html)

<div ui-view="">

// the content of the parent template, e.g. list of colors      

</div>

因此，因为 ui-view="" 是在父 root 元素上定义的，所以子元素实际上会替换它。更重要的是，我们将获得 $scope 继承权：

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

现在更多。让我们想象一下，我们会有更多的颜色，而不仅仅是黄色。这可能会导致方法发生变化，color 可能会变成 parameter:

.state('colors', {
  url: "/colors",
  ...
})
.state('colors.color', { 
  url: "/:color",
  ...

这是一个很大的变化，因为现在我们可以像 /colors/yellow 或 /colors/red 一样拥有 url，所有这些都将由 stat colors.color

让我们继续，使用此处的解决方案： - 我们甚至可以拥有许多模板，每个颜色名称各不相同。

然后我们可以将它们定义为 angular 模块中的常量：

 .value('myTemplates', {
      "yellow"  : "views/colors/yellow.html",
      "red"     : "views/colors/red.html",
      "default" : "views/colors/default.html",
    }
 )

我们的子状态可以根据参数在运行时间内使用它们。这将是电话：

<a ui-sref="colors.color({color: 'yellow'})">
<a ui-sref="colors.color({color: 'red'})">
<a ui-sref="colors.color({color: 'white'})">

这将是调整后的子状态：

.state('colors.color', { 
  url: "/:color",
  templateProvider: ['$templateRequest', '$stateParams', 'myTemplates',
  function($templateRequest, $stateParams, myTemplates) {

    var templateName = myTemplates[$stateParams.color]
                    || myTemplates["default"];
    return $templateRequest(templateName);
  }],
})

检查 action here

中的所有内容

ui-没有嵌套视图的路由子状态

ui-route substates without nested views

angularjs

angular-ui-router

Scope Inheritance by View Hierarchy Only