1

I've two named views and an unnamed view as the follow:

//department.html
<div class="col-md-2">
        <div ui-view="sideBar"></div>
 </div>

 <div class="col-md-10">

        <div ui-view="content"></div>

        <div ui-view></div>

 </div>

And my routes:

.state('Support', {
    url: '/support',
    views: {
       '': { templateUrl: 'app/components/department/department.html'  },

       'sideBar@Support': {
                           templateUrl: 'app/shared/sideBar/sideBar.html',
                           controller: 'SideBarController'
                          },

        'content@Support':{
                           templateUrl: 'app/components/department/support/partial-support.html',
                           controller: 'SupportController'
                          },

      }        
  })


.state('Support.view', {
  url: '/view',
  template: '<b> Hi there nested!!</b>'
});

What do i need :

  • localhost/support : this is a parent url, in that url two named views are injected(sideBar and content) which works for me.
  • localhost/support/view : in this router i want a child view that will replace the content view OR replace both multiple views.

The problem is: I can't get the nested view working, i'm doing something wrong?

PS: I've read the ui-router doc and see other questions i can't find any similar scenario.

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Marwen Trabelsi
  • 4,167
  • 8
  • 39
  • 80

1 Answers1

1

Your scenario is working when NOT having html5Mode enabled. There is a working plunker.

I just used these links:

<a ui-sref="Support">
<a ui-sref="Support.view">

And the state as is - works.

In case, that you have html5Mode enabled, you must also configure your server. But as this updated plunker shows, it is working again, even with html5Mode enabled

$locationProvider.html5Mode({enabled: true});

Check a version

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks for pointing out about html5Mode, but the problem still not resolved i want to completely replace the content of **content@Support**, in other words when i click the **Support.view** link i don't want to see **content@Support** 's content... – Marwen Trabelsi Apr 14 '15 at 17:02
  • I created an adjusted plunker here http://plnkr.co/edit/0nls7qhL40B792uRZ6sp?p=preview, which does change the content of the **content@Support** on a Support.view... to an empty stuff. I used native UI-Router solution - multi `views :{}` Hope that this helps – Radim Köhler Apr 15 '15 at 04:38