Angular ui.router setting ancestor state named view

Question

As per the documentation for multiple named views ( https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views ) child states can set named views in ancestor states by using the @ notation.

This doesn't seem to be working in my example ( http://jsfiddle.net/sarvesht/rx8jLep2/ )

This is how I have defined my parent and child states, I am setting the viewB view in the child state but its not reflected on the page.

.state('index', {
    url: "",
    views: {
    "viewA": {
        template: "index.viewA"
    }
    }
})
.state('index.sub',{
    views: {
    "viewB@index": {
        template: "index.viewB"
    }
    }
})

Is it possible to achieve what I am trying to do? Or am I doing something wrong?

Regards
Sarvesh

Answer 1

If I do understand your aim properly, you are almost there. The only adjustment should be:

.state('index.sub',{
    views: {
    // instead of this
    // "viewB@index": {
    // we need thsi
    "viewB@": {
        template: "index.viewB"
      }
    }
})

The reason is, that I expect that your ViewA and ViewB are both defined on the root level (index.html) . And that's why the first state 'index' is correctly working, because it definition is:

.state('index', {
    url: "",
    views: {
    // this is working
    "viewA": {
    // and this would be as well
    "viewA@": {      
        template: "index.viewA"
    }
    }
})

Other words, I expect both views are inside of root view, which name is empty string. That's why we can target both of them like:

    "viewA@": {      
    "viewB@": {      

See: View Names - Relative vs. Absolute Names small cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename , where viewname is the name used in the view directive and state name is the state's absolute name, eg contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

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

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.

There is updated plunker , with this state def:

$urlRouterProvider.otherwise("/index/sub")
$stateProvider
    .state('index', {
      url: "/index",
      views: {
        "viewA": {
          template: "index.viewA"
        }
      }
    })
    .state('index.sub', {
      url : "/sub",
      views: {
        /*
        "viewB@index": {
          template: "index.viewB"
        },
        */
        "viewB@": {
          template: "index.viewB"
        }
      }
    })

The key is to define url or at least properly navigate to sub state index.sub