Angularjs nested ui view not working

Question

In one of my applications, I have created a maincontroller and a main page with ui-view. A main_live_video_chat.html is being loaded into the main page ui-view. This subpage main_live_video_chat.html has multiple ui-view with controllers. I have created routes based on different states, these sub ui views works when part of main page, but shows nothing when configured with the sub page main_live_video_chat.html.

The app.config looks as follows:

app.config([
  '$locationProvider',
  '$stateProvider',
  function($locationProvider, $stateProvider) {

    //setup our two states, archive and live
    $stateProvider
      .state('player', {
        abstract: true,
        url: "/",
        views: {
            '': {templateUrl: "views/main.html",  
                controller: "mainController",
                controllerAs: "main"
            },
          //******This config work fine.******
          'schedule@player': { 
                templateUrl: "views/rail/schedule.html",
                controller: "scheduleController",
                controllerAs: "schedule"
            }
        }
      })
      .state('player.live', {
          url: "^/live/:playerId",
          templateUrl: "views/main_live_video_chat.html"

          //******This config doesnt work.******
          //views: {
          //    '@': {
          //        templateUrl: "views/main_live_video_chat.html",
          //    },

          //    'schedule@player': {
          //        templateUrl: "views/rail/schedule.html",
          //        controller: "scheduleController",
          //        controllerAs: "schedule"
          //    },
      })
  }
]);

Please note that this schedule view need to be shown in vi view inside main_live_video_chat.html

score 0 · Answer 1 · answered Oct 26 '16 at 06:42

0

It CANNOT work.

The parent state is injecting its template "views/main.html" into index.html

views: {
    '': {templateUrl: "views/main.html",

And that template is containing the target for side view <div ui-view="schedule">

But child is replacing that parent's template "views/main.html" by this statement

  views: {
      '@': {
          templateUrl: "views/main_live_video_chat.html",

So, now, there is no target <div ui-view="schedule">... and that's why this cannot find its place:

  //******This part doesnt work.******
  //views: {
  //    '@': {
  //        templateUrl: "views/main_live_video_chat.html",
  //    },

  // THERE is NO target 'schedule' created by parent 'player'
  //    'schedule@player': {
  //        templateUrl: "views/rail/schedule.html",
  //        controller: "scheduleController",
  //        controllerAs: "schedule"
  //    },

Solution:

Either do not replace the parent's unnamed view target... just target 'schedule'... or
A child must repeat all that stuff again

answered Oct 26 '16 at 06:42

Radim Köhler

122,561
47
239
335

Radim, Thank you very much for your prompt response, in fact I am new to angularjs, The main page ui view is replaced by the child state, then in child view I have multiple ui views. Can you please give me a hint how a child must repeat all the stuff again? – Khurram Oct 26 '16 at 06:52
I would not skip parent. I would let him to create some basic templates and targets.. and children will just replace what they want. There are nice examples of nested and named vies here http://stackoverflow.com/a/28826126/1679310 or there http://stackoverflow.com/a/25678843/1679310.. they contain working examples and should help to understand view nesting... hope it helps a bit ;) – Radim Köhler Oct 26 '16 at 06:54
I have tried the solution provided in the plunker, the views are being loaded, but the data inside these sub views is not shown at all. can you please help? – Khurram Oct 26 '16 at 12:03
Look, I am ready to assist. Create a plunker (or adjust some of mine) and even if that will be broken, I can try to fix it and to show you how to. But do the first step, prepare that in a plunker.. ok? – Radim Köhler Oct 26 '16 at 12:04

Angularjs nested ui view not working

1 Answers1