Angular.js - ui-router not injecting view

Question

I have a problem with ui-router for angular.js. I am currently working on a project with angular.js and using ui-router as router. The problem now is, that I want to have a nested view as like this:

views/settings/index.html (also an previously created template in ui-router)

<div class="settings">
  [...]
  <div class="settings-content" ui-view="content"></div>
</div>

app.js

$stateProvider.state('settings', {
  url: '/settings',
  views: {
    main: {
      templateUrl: 'views/settings/index.html',
      controller: 'SettingsController'
    },
    "content": {
      templateUrl: 'views/settings/privacy.html',
      controller: 'SettingsController'
    }
  },
  ncyBreadcrumb: { label: 'Settings' }
})

Now the problem I have is, that the defined content template is not injected into the ui-view="content" div. The main content ( views/settings/index.html ) is loading properly. And in nested states it's also possible to add a template into the ui-view="content" with the same "string": Object .

How does this come? Thanks in advance!

Answer 1

You must use the viewName@stateName syntax as stated here .

Try this

$stateProvider.state('settings', {
  url: '/settings',
  views: {
    main: {
      templateUrl: 'views/settings/index.html',
      controller: 'SettingsController'
    },
    "content@settings": {
      templateUrl: 'views/settings/privacy.html',
      controller: 'SettingsController'
    }
  },
  ncyBreadcrumb: { label: 'Settings' }
})

Answer 2

I have used the ui-router module in my demo application.

You need to specify the hierarchy in your view.

The parent view is not specified to child view so you must use ViewName@parentState

https://github.com/singhmohancs/angularDemo/tree/master/app/modules