CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-routerchildviews
uniXVanXcel
uniXVanXcel

Reputation: 806

AngularJS Child view not showing

I am trying to render a child view. However it is not showing, here is a sample of code below. Most examples I see have the entire state template in a single template; however I have several views in different templates which composed each states template.

.state({
          name: 'search',
          url: '/x',
          abstract: true,
          views: {
            'searchBar': {
              templateUrl: "template/template.html",
              controller: "searchBar"
            } 
          }
        })
        .state({
          name: 'search.final',
          url: '^/details', 
          params: {
            Data: "hello World"
          },
          views: {
            'dashb': {
              templateUrl: 'template/dashb.html'
            },
           'sidebar': {
              templateUrl: 'template/sidebar.html'
            },
          }

and then my index.html is as follow

<div>
    <div class="row">
      <div class="col-lg-3">
        <div ui-view="searchBar"></div>
        <br>
        <div ui-view="sidebar"></div> 
        <br>
      </div>
      <div class="col-lg-9" ui-view="dashb"></div>
    </div>
  </div>

I have in searchBartemplate <ui-view></ui-view> for the child view to be inserted, meaning the sideBar and dashb

and in a controller I have this:

$state.go("search.final" , {Data:"Byee"})

However I am not rendering the child view.. any help appreciated. thanks

Upvotes: 0

Views: 44

Answers (1)

uniXVanXcel
uniXVanXcel

Reputation: 806

I figured it out. We need to append @ at the end of the name of the view for the child view. :)

.state({
          name: 'search',
          url: '/x',
          abstract: true,
          views: {
            'searchBar': {
              templateUrl: "template/template.html",
              controller: "searchBar"
            } 
          }
        })
        .state({
          name: 'search.final',
          url: '^/details', 
          params: {
            Data: "hello World"
          },
          views: {
            'dashb@': {
              templateUrl: 'template/dashb.html'
            },
           'sidebar@': {
              templateUrl: 'template/sidebar.html'
            },
          }

Upvotes: 0

Related Questions