Question

80

AngularJS UI router: How to configure nested named views?

rated 0 times [ 87] [ 7] / answers: 1 / hits: 18055 / 10 Years ago, sun, may 11, 2014, 12:00:00

I have a configuration like below:

...

.state('profiles', {

    abstract: true

    , url : '/profiles'

    , resolve: {...}    

    , views: {

      mainModule: {

        templateUrl : '/partials/home.html'

        , controller : 'HomeCtrl'

      }

      , leftSidePaneModule: {

          templateUrl : '/partials/leftSidePane.html'

          , controller : 'LeftSidePaneCtrl'

      }

    }

  })

...

Main Jade File

...

.col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll=false)  

...

So, leftSidePaneModule module gets populated in to ui-view='leftSidePaneModule' placeholder. But the problem is, I have 2 more named views inside leftSidePaneModule template. leftSidePaneModule template looks like this:

leftSidePaneModule.html

<div>

  <div ui-view=leftWidgetOne></div>

  <div ui-view=leftWidgetTwo></div>

</div>

How do i make modules leftWidgetOne & leftWidgetOne gets populated in to above placeholder?

I tried,

...

.state('profiles', {

    abstract: true

    , url : '/profiles'

    , resolve: {...}    

    , views: {

      mainModule: {

        templateUrl : '/partials/home.html'

        , controller : 'HomeCtrl'

      }

      , leftSidePaneModule: {

          templateUrl : '/partials/leftSidePane.html'

          , controller : 'LeftSidePaneCtrl'

      }

      , 'leftWidgetOne@leftSidePaneModule' : {...}

      , 'leftWidgetTwo@leftSidePaneModule' : {...}

    }

  })

...

Attempt: 2

...

.state('profiles', {

    abstract: true

    , url : '/profiles'

    , resolve: {...}    

    , views: {

      mainModule: {

        templateUrl : '/partials/home.html'

        , controller : 'HomeCtrl'

      }

      , leftSidePaneModule: {

          templateUrl : '/partials/leftSidePane.html'

          , controller : 'LeftSidePaneCtrl'

          , views: {

             'leftWidgetOne' : {...}

             , 'leftWidgetTwo' : {...}

          }

      }

    }

  })

...

Both are not working.

How do you do it?

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dantel

Add To Favorites

Follow

Total Points: 7

Total Questions: 102

Total Answers: 97

Location: Saint Lucia

Member since Sat, Jun 6, 2020

4 Years ago

dantel questions

1 react-native-webview crashes application when invoked

Fri, Apr 10, 20, 00:00, 4 Years ago

1 One liner function to iterate over array of objects and change one value

Wed, Jan 29, 20, 00:00, 4 Years ago

1 Variable 'xxx' is used before being assigned

Fri, Dec 13, 19, 00:00, 5 Years ago

1 How to make my slackbot reply in a thread, instead of to entire channel using Google App Script

Tue, Oct 29, 19, 00:00, 5 Years ago

1 Select DOM element via VueJS

Wed, Aug 14, 19, 00:00, 5 Years ago

View All

answered 10 Years ago haden · Accepted Answer

The solution could be found here: View Names - Relative vs. Absolute Names. A cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item

...

(note: in our case it must be 'profiles').

The point is, that we can use the full (absolute) name of the view, being part of the current state definition:

$stateProvider

    .state('profiles', {

        url: '/profiles',

        views: {

            mainModule: {

                template: '<div>' +

                          '  <h1>Main</h1>' +

                          '  <div ui-view=leftSidePaneModule></div>' +

                          '</div>',

            },

            // here we do target the view just added above, as a 'mainModule'

            // as <div ui-view=leftSidePaneModule>

            'leftSidePaneModule@profiles': {

                template: '<div>' + 

                            '  <div ui-view=leftWidgetOne></div>' + 

                            '  <div ui-view=leftWidgetTwo></div>' +

                            '</div>',

            },

            // and here we do target the sub view

            // but still part of the state 'profiles' defined in the above

            // view defintion 'leftSidePaneModule@profiles'

            'leftWidgetOne@profiles': {

                template: '<h2>One</2>',

            },

            'leftWidgetTwo@profiles': {

                template: '<h2>Two</2>',

            },

        }

    });

There is also plunker showing the above code in action