CODEWITHSUNDEEP
angularjsnestedangular-ui-routerstate
ohboy21
ohboy21

Reputation: 4319

Different states doesn't show template content

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?

Upvotes: 2

Views: 373

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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:

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

Upvotes: 2

Related Questions