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;
                  }
                  },
                  '[email protected]':{
                    templateUrl:'money.html',
                     controller: function($scope,$stateParams){
                   console.log($scope.parentid);
                  }
                  },
                  '[email protected]':{
                    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?

Community · Accepted Answer · 2017-05-23 11:43:30Z

2

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Dec 20, 2014 at 4:46

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

linyuanxie Over a year ago

Thanks for your answer. I still get confused why it didn't work. Would you please share more details?

Radim Köhler Over a year ago

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 ;)

linyuanxie Over a year ago

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.

Collectives™ on Stack Overflow

Nasted named views not showing up in angularjs $stateProvider

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related