CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
jrSakizci
jrSakizci

Reputation: 171

UI-Router doesnt working as expected(NESTED VIEWS!)

I am trying to use ui-router on my current project. But somehow, when it comes to nested view(i think i wrote it proper and correct) it doesnt showing content of views.. Let me show you my code..

.state('sport', {
  url:'/sport',
  templateUrl: 'views/sport.html',
  controller: 'HomeCtrl',
  controllerAs:'home',
  requireLogin:false,
})
.state('sport.subs', {
  url:'/left',
  parent:'sport',
  views: {
    'left@sport': { templateUrl:'views/partials/left-sidebar.html'},
    'content@sport': {templateUrl:'views/home.html'},
    'right@sport':{templateUrl:'views/partials/sup-nav.html'}
  },
  onEnter:function() {
    console.log("leftside Entered");
  },
  requireLogin:false
})

and my sport.html

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

it is opening sport.html and showing their content but not nested views..

enter image description here

I've tried everything. I do research about this problem in here and everywhere else but couldnt find the solution.. Somehow, when it comes to nested view its like something is blocking it or i am doing it all wrong.. I dont know.. Any help will be very much appreciated..

When i tried to debugging, it seems every view is loaded. enter image description here PS: I removed "parent", and then add it, i tried almost everything..

Upvotes: 0

Views: 32

Answers (1)

jrSakizci
jrSakizci

Reputation: 171

okay i solved my problem.

i solved my problem by changing my route code to this;

 .state('sport', {
url: '/sport',
controller: 'HomeCtrl',
views: {
  '@': {
    templateUrl: 'views/home.html'
  },
  'left@sport': {templateUrl: 'views/partials/left-sidebar.html', controller: 'HomeCtrl'},
  'content@sport': {templateUrl: 'views/content.html', controller: 'HomeCtrl'},
  'right@sport': {templateUrl: 'views/right-side-bar.html', controller: 'HomeCtrl'}
}

})

and if i want to add sub states, i am doing like this; (i am changing right side of parent router)

.state('eventResult', {
  parent:'sport',

  views: {
    'content@sport': {templateUrl:'views/event-result-manager.html', controller: 'EventResultManagerCtrl', controllerAs: 'vmEventResultManager'},
    'right@sport': {templateUrl:'views/event-result-manager-right.html', controller: 'EventResultManagerCtrl', controllerAs: 'vmEventResultManager'}
  },
  url:'/event-result',

  requireLogin:false
})

Upvotes: 1

Related Questions