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

正如您在下面的代码中所注意到的，我希望有一个父“颜色”状态的视图（它将显示一个包含颜色列表的表），然后每个颜色都应该有自己的视图，而不是从“颜色”继承的视图

所以层次结构应该只应用于URL，而不是视图

有什么想法吗

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

---

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

UI路由器的神奇之处

我创造

首先，我们可以使用这种父模板（

colors.html

）

这是一个很大的变化，因为现在我们可以有像

/colors/yellow

或

/colors/red

这样的url，所有这些都将由stat

colors.color

让我们继续，使用这里的解决方案：-我们甚至可以有许多不同颜色名称的模板

然后我们可以将它们定义为角度模块内的常数：

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

检查“全部输入”

我在这里找到了答案：

 .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);
  }],
})