[AngularJS][UI-Router] Display view in view

Question

I don't know how to describe my problem but maybe code help :)

What i want: Display create_modal.html in views/accounts/index.html

app.js:

angular.module('myApp', [
 'ui.router'
]).config(function($stateProvider) {
      $stateProvider
          .state('index', {
            url: '/',
            template: 'Index template'
          })
          .state('about', {
              url: '/about',
              template: 'About template'
          })
          .state('panel', {
              url: '/panel',
              templateUrl: 'views/panel/index.html'
          })
          .state('accounts', {
              url: '/panel/accounts',
              templateUrl: 'views/accounts/index.html'
            })
          .state('accounts.create', {
                views: {
                    create_modal: {
                        templateUrl: 'views/accounts/partials/create_modal.html'
                    }
                }
          })
});

main index.html

<div class="container" ui-view></div>

views/accounts/index.html

[...]
<div ui-view="create_modal"></div>
[...]

When i go on /accounts/ i see accounts/index.html but create_modal.html not load in view. Any ideas ?

Answer 1

I don't have access to a dev environment, but have you tried setting a empty url for your 'accounts.create' state ?

That's how they do it here:

https://angular-ui.github.io/ui-router/sample/#/contacts

Here's the source code (look for the "contacts.list" state):

https://angular-ui.github.io/ui-router/sample/app/contacts/contacts.js

Hope that helps.

Answer 2

Giving the UI-View a name is only setting the name of the view, not setting the state to the state you want to use. You should name the UI-View whatever you want the name to be called.

You could try applying a UI-sref to an anchor tag if you want to test it out, but what you want to do is to change the $state variable to your desired state.

$state.go('accounts.create');

Another thing you could try doing would be to set a URL for that state and navigate to that URL.

.state('accounts', {
    url: '/panel/accounts',
    templateUrl: 'views/accounts/index.html'
})
.state('accounts.create', {
    url: '/create',
    templateUrl: 'views/accounts/partials/create_modal.html'
});

Hope that helps, I'll include the documentation for UI-View for your reference.

Click here!