1

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!

2

2 Answers 2

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.