尝试将 angularjs 中的嵌套视图与 ui-router 一起使用会得到一个空白页面

Question

我的设置

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 时，我得到一个空白页面，我不确定我做错了什么，所以非常感谢任何帮助。

Answer 1

当存在嵌套 ui-view 时，你不应该在 state 中加载基本模板，在 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){  }
    }
  }
 });
});

尝试将 angularjs 中的嵌套视图与 ui-router 一起使用会得到一个空白页面

Trying to use nested views in angularjs with ui-router get a blank page

javascript

angularjs

states