UI-Router没有按预期工作(NESTED VIEWS!)

时间:2017-03-15 13:36:09

标签: javascript angularjs angular-ui-router

我正在尝试在我当前的项目中使用ui-router。但不知何故,当谈到嵌套视图(我认为我写得正确而且正确)时,它并没有显示视图内容。让我告诉你我的代码..

.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
})

和我的sport.html

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

它正在打开sport.html并显示其内容,但不显示嵌套视图..

enter image description here

我已经尝试了一切。我在这里和其他地方研究这个问题,但无法找到解决方案..不知何故,当谈到嵌套视图时,它就像阻塞它或者我做错了一样......我不知道..任何帮助都将是非常感谢..

当我尝试调试时,似乎每个视图都被加载。 enter image description here PS:我删除了#34; parent&#34;,然后添加它,我几乎尝试了所有的东西..

1 个答案:

答案 0 :(得分:1)

好吧,我解决了我的问题。

我通过将路线代码更改为此来解决了我的问题;

 .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'}
}

})

如果我想添加子状态,我就是这样做的; (我正在改变父路由器的右侧)

.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
})