AngularJS UI-Router - 无法获取嵌套状态来显示模板

Question

我不知道我做错了什么，但这就是我想要的。

首先，这是我的 body:

 <body>
    <div ng-app="testApp" ng-controller="MainController" class="container-fluid">
        <div ui-view class="row"></div>
    </div>

  </body>

现在，在 ui-view 中，我想要一些依赖于 URL 的内容。首先，会有包含其他州的家乡州。

 - Home
     - Recent Studies
     - Studies
 - Map
     - Study

为此，我正在尝试创建路由层次结构。这将是我的主页模板 (home.html)，一个抽象模板，将放在上面的 ui-view 中：

<div ng-controller="HomeController">
    <header>
        <div class="row">
            <div class="col-xs-6">Test Web Application</div>
            <div class="col-xs-6">
                <p class="pull-right">Bonjour 
                  <strong>{{currentAccount.name}}</strong> ! 
                  <a href="#">Déconnexion</a></p>
            </div>
        </div>
    </header>

    <article class="row">
        <div ui-view></div>
    </article>

</div>

这是最近的研究 (home.recentStudies.html.twig)，我想将其放入 home.html 的 ui-view:

<p>Recent studies</p>

这里是路由定义：

angular.module('testApp').config(['$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/recentStudies');
    $stateProvider
        .state('home', {
            url: '/',
            abstract: true,
            templateUrl: 'partials/home.html'
        })
        .state('home.recentStudies', {
            url: '/recentStudies',
            templateUrl: 'partials/home.recentStudies.html'
        })
        .state('home.studies', {
            url: '/studies',
            templateUrl: 'partials/studies.html'
        })
    ;

}]);

我的问题是，当我加载应用程序时，一切都是空白，我似乎不明白这个问题。

好像不能在plnkr中使用templateUrl所以我直接将代码转入template:

http://plnkr.co/edit/kGIxPSNXGy2MLLhXFXva?p=preview

Answer 1

重点是parent和childurl的组合。这很容易工作

$urlRouterProvider.otherwise('//recentStudies');

检查一下here

为什么？因为 url 的 child 状态是从其祖先构建的。所以 'home' 状态有 url url: '/', 而 child 'home.recentStudies' 有 url: '/recentStudies',

所有这些都意味着 - 完整的 url 是这些的联系 === '//recentStudies'

但这不是最好的方法。我们可以在 child:

上使用重置

.state('home.recentStudies', {
        url: '^/recentStudies',

...
$urlRouterProvider.otherwise('/recentStudies');

然后即使是原始的默认设置也可以使用。检查一下here

查看文档：

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

AngularJS UI-Router - 无法获取嵌套状态来显示模板

AngularJS UI-Router - Cannot get a nested state to show the template

javascript

state

angularjs

angular-ui-router

Absolute Routes (^)