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!

Any errors in the javascript console when you try to load the view? — Nick, Dec 23 '14 at 15:24
possible duplicate of [Angular UI-Router multiple views](http://stackoverflow.com/questions/22175980/angular-ui-router-multiple-views) — cleftheris, Dec 23 '14 at 15:57

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

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' }
})

score 0 · Answer 2 · edited Dec 23 '14 at 16:13

0

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

edited Dec 23 '14 at 16:13

Paul Richter

10,908
10
52
85

answered Dec 23 '14 at 15:45

Mohan Singh

883
8
18

Angular.js - ui-router not injecting view

2 Answers2