尝试在angularjs中使用嵌套视图和ui-路由器获得一个空白页。

Question

我的圈套

应用/学习/学习.app

 angular.module('meanApp')
.config(function($stateProvider) {
  $stateProvider
  .state('learning',{
    templateUrl: 'app/learning/learning.html',
    url: '/learning',
    controller: 'LearnCtrl',
    views: {
     'list': {
       templateUrl: 'app/learning/learning.list.html',
       controller: function($scope){  }
     },
     'magic': {
       templateUrl: 'app/learning/learning.magic.html',
       controller: function($scope){  }
     }
   }
 });
});

app/learning/learning.html

<h1>Learning</h1>
<div ui-view="list"></div>
<div ui-view="magic"></div>

app/learning/learning.list.html

<p>A list</p>

app/learning/learning.magic.html

<h2>Magic</h2>

当我导航到/learning时，我得到了一个空白页面，我不知道我做错了什么，所以任何帮助都是非常感谢的。

Answer 1

当存在嵌套ui-view时，不应该在状态内加载基本模板，请在views中定义基本模板。

路由码

 angular.module('meanApp')
.config(function($stateProvider) {
  $stateProvider
  .state('learning',{
    url: '/learning',
    views: {
     '': {
       templateUrl: 'app/learning/learning.html',
       controller: 'LearnCtrl'
     },
     'list@learning': { //you missed state name here
       templateUrl: 'app/learning/learning.list.html',
       controller: function($scope){  }
     },
     'magic@learning': { //you missed state name here
       templateUrl: 'app/learning/learning.magic.html',
       controller: function($scope){  }
     }
   }
 });
});

这能帮到你谢谢。

Answer 2

问题是，我试图在状态中加载基本模板，而我忽略了Pankaj所说的状态名称，所以解决方案是.

angular.module('meanApp')
.config(function($stateProvider) {
 $stateProvider
 .state('learning',{
   url: '/learning',
   views: {
     '': {
     templateUrl: 'app/learning/learning.html',
     controller: 'LearnCtrl'
    },
    'list@learning': { //you missed state name here
     templateUrl: 'app/learning/learning.list.html',
     controller: function($scope){  }
    },
    'magic@learning': { //you missed state name here
     templateUrl: 'app/learning/learning.magic.html',
     controller: function($scope){  }
    }
  }
 });
});