Nasted named views not showing up in angularjs $stateProvider

Question

I am trying to show 2 different blocks by tag. but the sub view is not showing up, Here is my code:

I want to use to choose which part I want to show.

 $stateProvider
            .state('route1', { 
                url: "/route1",
                templateUrl: "route1.html" 
            }) 
              .state('route1.list', {
                  url: "/list/:id", //the URL will be: route1/list
                  views:{
                  '':{  
                  templateUrl: "route1.list.html",
                  controller: function($scope,$stateParams){
                    $scope.items = ["I am", "from", "Insperity", "Items"];
                   // console.log($stateParams.id);
                    $scope.parentid=$stateParams;
                  }
                  },
                  'money@route1.list':{
                    templateUrl:'money.html',
                     controller: function($scope,$stateParams){
                   console.log($scope.parentid);
                  }
                  },
                  'details@route1.list':{
                    templateUrl:'detail.html'
                  }`enter code here`
                  }
              })
    Html for route1.list.html :
    <h3>List of Route 1 Items</h3>
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <a ui-sref="money">go to money</a>
    <a ui-sref="details">go to details</a>
    <div ui-view></div>

    but if I change my html to this: (it works, but not the way I want)
    <h3>List of Route 1 Items</h3>
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <div ui-view='money'></div>
    <div ui-view='details'></div>

Any idea about this issue?

score 2 · Accepted Answer · edited May 23 '17 at 11:43

One way could be to make the money and detail child state of our list state. There is a working plunker

That would be adjusted state def:

 ...
 .state('route1.list', {
    url: "/list/:id", //the URL will be: route1/list
    views: {
      '@': { // targeting index.html ui-view=""
        templateUrl: "route1.list.html",
        controller: function($scope, $stateParams) {
          $scope.items = ["I am", "from", "Insperity", "Items"];
          // console.log($stateParams.id);
          $scope.parentid = $stateParams;
        }
      },
    }
  })
  .state('route1.list.money', {
    url: "/money", 
    template: "<div>this is money</div>",
    controller: function($scope, $stateParams) {
          console.log($scope.parentid);
      }
    })
  .state('route1.list.detail', {
    url: "/detail", 
    template: "<div>this is a detail</div>"
  })

And this would be adjusted route1.list.html

<div>
  <h3>List of Route 1 Items</h3>
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
  <a ui-sref="route1.list.money($stateParams)">go to money</a><br />
  <a ui-sref="route1.list.detail($stateParams)">go to details</a>
  <div ui-view></div>
</div>

Check it all in action here. In case you would like to see more about nesting, view naming etc. you can check this Q & A as well

Thanks for your answer. I still get confused why it didn't work. Would you please share more details? — linyuanxie, Dec 20 '14 at 06:01
Just compare my state definition and yours. I made list a **parent** and decided to have the **money** and **detail** as its children. Now, we can easily inter-change children... parent is still the same (not reloading). Does it help?. In comparison with the original solution - all was defined as only **one** state - with **MANY views**. But that was only ONE state. So we could not use routing to change the views... now we can. We have brand new two states, with their own url, so ... it works ;) — Radim Köhler, Dec 20 '14 at 06:05
well which means we can only use routing to display nasted views, but can't change it? but if we want to rout it, we better create a new state. — linyuanxie, Dec 20 '14 at 06:15

Nasted named views not showing up in angularjs $stateProvider

1 Answers1