0

I've read through the documentation for angularjs-ui-router, a bunch of samples and a bunch of stackoverflow posts but I can't seem to figure out how to do this very specific thing.

The problem is having a set of named views and only wanting to update 1 of them without reloading/resetting the other named views. I've tried some kind of state inheritance between them, but it kind of doesn't make sense since neither should be an ancestor to the other.

Let's say I have a nested unnamed ui-view containing 3 named views, like so:

<div>
  <div ui-view="viewA"></div>
  <div ui-view="viewB"></div>
  <div ui-view="viewC"></div>

  <a ui-sref="mystate.stateA">Activate A</a>
  <a ui-sref="mystate.stateB">Activate B</a>
  <a ui-sref="mystate.stateC">Activate C</a>
</div>

Then, in my state provider, i have the following config:

.state('mystate', {
  url: "/mystate",
  views : {
    "": { templateUrl: "/app/views/myview.html", controller: "myController" },
    "viewA": { template: "Nothing" },
    "viewB": { template: "Nothing" },
    "viewC": { template: "Nothing" }
  }
})

.state('mystate.stateA', {
  url: "/stateA",
  views : {
    "viewA": { template: "A" }
  }
})

.state('mystate.stateB', {
  url: "/stateB",
  views : {
    "viewB": { template: "B" }
  }
})

.state('mystate.stateC', {
  url: "/stateC",
  views : {
    "viewC": { template: "C" }
  }
})

Now, when I click on link "Activate A", it shows the string "A" instead of "Nothing" in viewA, so far so good. But when I click on link "Activate B", viewA "resets" to the ancestor state's "Nothing" again while viewB shows "B".

What I am wondering is if it's possible to prevent viewA from resetting to "Nothing" in this scenario?

Johli
  • 1
  • In this scenario NO. But there is other... the nesting. So, if it make sense, that stateA should survive any changes during StateBs.. make it a parent state. In fact.. that way you gain exactly what you need and how ui-router was created ... maybe check these http://stackoverflow.com/a/20558850/1679310 and http://stackoverflow.com/a/23825238/1679310 – Radim Köhler Jul 17 '14 at 09:24
  • The problem with that approach is if both viewA and viewB should survive eachothers changes, which they should (im trying to build a schema editor with various tool boxes, solutions explorers etc), they would have to inherit from eachother's state (circular routing sounds bad :P) In that case it seems like good old ngRoute with include directives will have to do! Thx for the answer! – Johli Jul 17 '14 at 17:19
  • For posterity's sake, @Johli 's exact scenario is possible using ui-router-extras "sticky states". The "tabs demo" is here (switch between tabs; note that each tab's DOM is exactly the same when switched back to): http://christopherthielen.github.io/ui-router-extras/example/sticky/index.html . Note that the demo makes the tab states sticky, and explicitly HIDES inactive tabs (using ng-show), the OP's desired use case works by simply making the states sticky: http://plnkr.co/edit/WllE9sDf2z47xfkICru4?p=preview – Chris T Apr 05 '16 at 18:43

0 Answers0