1

у меня есть шаблон с несколькими имени, вложенными просмотров:Изменение только один из нескольких названных, вложенных маршрутов

шаблона 1:

<body> 
    <div ui-view></div> 
</body> 

шаблон 2:

<header></header> 
<div ui-view="left"></div> 
<div ui-view="canvas"></div> 
<div ui-view="right"></div> 

и у меня есть следующая конфигурация конфигурации:

.state("metricDashboard", { 
     url: "/metric-dashboard", 
     css: { href: "core/metric-dashboard/style.css" }, 
     views: { 
      "": { 
       templateUrl: "core/metric-dashboard/view.html", 
       controller: 'MetricDashboard', 
      }, 
      "[email protected]": { 
       templateUrl: "core/metric-dashboard/partials/left.html", 
       controller: "MetricDashboardLeft", 
      }, 
      "[email protected]": { 
       templateUrl: "core/metric-dashboard/partials/canvas.html", 
       controller: "MetricDashboardCanvas" 
      }, 
      "[email protected]": { 
       templateUrl: "core/metric-dashboard/partials/right.html", 
       controller: "MetricDashboardRight" 
      } 
     } 
    }) 

Как мне изменить индивидуальный маршрут? Например, если бы я хотел изменить «left @ metricDashboard», но оставил только «холст» и «правый» маршрут. Я не могу найти синтаксис, не создавая новое состояние, и явным образом объявляю все маршруты заново.

+0

Если это состояние ребенка, вам не нужно объявлять все виды только тех, которые меняют – koox00

+0

Я думал, что пробовал это. Можете ли вы предоставить некоторый синтаксис? –

+0

Можете ли вы более конкретно узнать, чего вы хотите достичь? – koox00

ответ

1

Хорошо, я предполагаю, что вы хотите создать другое состояние, которое изменит только один из видов не всех.

Давайте назовем это left и сделать его ребенок metricsDashboard

.state("metricDashboard", { 
    url: "/metric-dashboard", 
    css: { href: "core/metric-dashboard/style.css" }, 
    views: { 
     "": { 
      templateUrl: "core/metric-dashboard/view.html", 
      controller: 'MetricDashboard', 
     }, 
     "[email protected]": { 
      templateUrl: "core/metric-dashboard/partials/left.html", 
      controller: "MetricDashboardLeft", 
     }, 
     "[email protected]": { 
      templateUrl: "core/metric-dashboard/partials/canvas.html", 
      controller: "MetricDashboardCanvas" 
     }, 
     "[email protected]": { 
      templateUrl: "core/metric-dashboard/partials/right.html", 
      controller: "MetricDashboardRight" 
     } 
    } 
}) 
.state("metricDashboard.left", { 
    url: "left", 
    views: { 
     "[email protected]" : { 
      templateUrl: "some.html", 
      controller: "AwesomeCtl", 
      controllerAs: "awe" 
     } 
    } 
}) 

Теперь, когда вы входите в это состояние только вид слева изменит остальные будут оставаться такими, как определено в родительском состоянии metricDashboard.

+0

Хорошо. Я получил эту работу. Сначала я думал, что это не работает, но мне просто пришлось добавить свойство 'css: {href:" core/metric-dashboard/style.css "},' там, поскольку я использую css-маршрутизацию. –