Different states doesn't show template content

Question

I have a basic Index.html file which following structure:

<body class="{{$state.current.name.replace('.','-')}}">
    <div ui-view>
        <div ng-include src="'partials/menu.html'"></div>
        <!-- <div ng-menu class="ui top blue sidebar menu active"></div> -->

        <div class="view-height-100"></div>
    </div>

 ...
</body>

When I am in the login state, it's working very well:

  $stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'partials/login-area.html',
        controller: 'LoginController',
      });

But, when I am routing to the user.management state, nothing gets shown (but Chrome is loading the template, so I can access the scope and the .html file is there):

$stateProvider
  .state('user', {
    url: '/:buildingName',
    controller: 'CurrentBuildingController',
    data: {
      access: ['user']
    }
  })
  .state('user.management', {
    url: '/management',
    templateUrl: '/views/management.html',
    controller: 'ManagementController'
  })

Can someone explain me why?

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Parent state simply must have target for its child (unless we use absolute naming to target some super parent, but it is another approach)

.state('user', {
    url: '/:buildingName',
    template: "<div ui-view></div>",
    controller: 'CurrentBuildingController',
    data: {
      access: ['user']
    }
  })

see that we now have template: "<div ui-view></div>", which will serve as a view target for any child state 'user.xxx'

Check also:

AngularJS UI-Router : Abstract state + child states not working

EXTEND - let child to target the index.html

We can use absolute naming and child will then be injected directly into index.html. There is a working plunker (by intention parent won't load, it does not have any template)

  .state('parent', {
      url: "/parent",
      //templateUrl: 'tpl.html',
  })
  .state('parent.child', { 
      url: "/child",
      views: {
        '@': {
          templateUrl: 'tpl.html',
          controller: 'ChildCtrl',
        }
      }
  })

Check this for more info:

Angularjs ui-router not reaching child controller

Thanks a lot! But now the div overrides my div-container inside the index.html. How can I make sure it's just adding and not overriding the container? — ohboy21, Oct 01 '15 at 14:40
In case I did understand what you want.. I extended answer, added example.. it should help to now how to with UI-Router ... — Radim Köhler, Oct 01 '15 at 14:46

Different states doesn't show template content

1 Answers1

Angularjs ui-router not reaching child controller