javascript - 尝试在带有UI路由器的angularjs中使用嵌套 View 会得到一个空白页

我的设定

app / learning / learning.js

 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时，我得到一个空白页，我不确定自己做错了什么，因此将不胜感激任何帮助。

最佳答案

当存在嵌套的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){  }
     }
   }
 });
});

这可以帮助您，谢谢。

关于javascript - 尝试在带有UI路由器的angularjs中使用嵌套 View 会得到一个空白页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28252730/